-1

是的。这已经被问了十亿次了。但是没有人给出适合我的答案。

这太愚蠢了。我有一个 SPLASH PAGE .. 上面几乎没有代码。它只有一些js和一系列淡入淡出的照片，一张一张。

无论我做什么，它都会对齐屏幕的左上角。这是代码。

<div style="height:100%; width=100%; margin: 0px auto;" id="these">
    <img src="photos/splash/Y.png" height="250px" style="padding: 20px;">
    <img src="photos/splash/I.png" height="250px" style="padding: 20px;">
    <img src="photos/splash/K.png" height="250px" style="padding: 20px;">
    <img src="photos/splash/M.png" height="250px" style="padding: 20px;">
    <img src="photos/splash/U.png" height="250px" style="padding: 20px;">
    <img src="photos/splash/N.png" height="250px" style="padding: 20px;">
</div>

无论分辨率如何，我都希望它在任何屏幕的中心对齐。ID="these" 与显示它们的 javascript 相关，与任何 css 级别的样式或定位无关。

简单得离谱吧？？是的。它总是显示在左上角。

我觉得没有必要发布 js（这也破坏了我的帖子），但如果你想要，请询问。它工作正常。我是一个讨厌（如厌恶）HTML/CSS 的后端编码人员。所以你必须真正引导我完成它，而不仅仅是提出模糊的建议。

我什至尝试了一张桌子！带有一个 valign 中心。这使它居中，但每个图像都出现在中心，然后在下一个图像淡入时被向左推。显然不是我想要的。

我想要的是让每个图像一个接一个地出现在它自己的位置。但适用于任何屏幕分辨率。

我正在失去理智。

谢谢。

4

5 回答 5

1

Your example shows you centering inline elements within a block level element. So all you need to do is this:

these { text-align:center; }

Ex: http://jsfiddle.net/87zqf/

If you want to center the div within its parent, that div must have some width less than 100%. For example:

div#these { 
    width: 350px; 
    margin: 0px auto;
    border: solid red 1px;
}

For example: http://jsfiddle.net/nRKYV/

于 2013-07-26T22:21:15.650 回答
0

div 上的 100% 高度不起作用，这是 CSS 的缺点之一（在我看来）。

最后，只有知道自己的身高才能做到<div>。然后你想要做的是绝对定位它，离屏幕的顶部和左侧 50%，并且其高度/宽度的一半的边距。

查看以下 JSFiddle 以了解如何完成：http: //jsfiddle.net/Lsh6j/1/

请注意，您还可以对周围的高度和宽度使用百分比<div>，但是要使基于百分比的高度起作用，<div>必须设置/知道 的父元素的高度。

于 2013-07-26T22:26:33.033 回答
0

最简单的解决方案（小提琴）：

html, body {
    height: 100%; /* necessary to make the window height be 100% */
    margin: 0;
}

body {
    display: table;
    width: 100%;
}

#these {
    display: table-cell;
    vertical-align: middle; /* for table cells, it aligns their content */
    text-align: center;
}

另一种选择（小提琴）：

html, body {
    height: 100%; /* necessary to make the window height be 100% */
    margin: 0;
}

#these {
    text-align: center; /* images are text content */
    white-space: nowrap;
}

#these:after {
    content: '';
    display: inline-block; /* adding invisible inline placeholder after images */
    height: 100%; /* make it 100% tall */
    vertical-align: middle; /* and align the whole line to its vertical center */
}

img {
    vertical-align: middle; /* align vertical centers of images to the middle of the line  */
}
于 2013-07-26T23:33:03.207 回答
0

使用本教程作为指导。首先centered用这个css添加一个类。

.centered {
  position: fixed;
  top: 50%;
  left: 50%; 
 }

将此类添加到您的 div 中：

<div class="centered" id="these">
  ...images....
</div>

问题是这居中 div 的左上角。所以你需要从 中减去一半，width从中减去margin-left一半。heightmargin-top

添加这个javascript（使用jQuery，如果有问题请告诉我）进行调整

<script>

function adjust() {
    var height = $("#these").height();
    var width = $("#these").width();
    $("#these").css("margin-top", "-" + height/2 + "px"); 
    $("#these").css("margin-left", "-" + width/2 + "px"); 
}
$(window).on("resize", adjust);
adjust();

这会在调整大小时适当地设置边距，并adjust在初始加载时调用该方法。

于 2013-07-26T22:41:28.017 回答
0

除非你有一些其他的 css 会搞砸，否则只需添加

#these {
    text-align: center;
}

到 div 包装器并打开/关闭可见性以保持它们就位：http: //jsfiddle.net/63cHS/

于 2013-07-26T22:17:47.440 回答