Question

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

太愚蠢了。我有一个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 =“这些”与显示它们的javascript有关，而与任何css级别的样式或定位无关。

可笑的简单吧？是啊。它总是出现在左上角。

我认为没有必要发布js（也是我的帖子），但如果你想要它，请问。它工作正常。我是HATES（就像在讨厌中）HTML / CSS的后端编码器。因此，您必须真正引导我完成它，而不仅仅是提出含糊的建议。

我甚至试过一张桌子！有一个valign中心。它集中了它，但每个图像都显示在中心，然后在下一个图像消失时向左推。显然不是我想要的。

我想要的是每张图片一个接一个地显示在它自己的位置。但是适用于任何屏幕分辨率。

我正在失去理智。

感谢。

Answer 1

您的示例显示了您在块级元素中居中的内联元素。所以你需要做的就是：

these { text-align:center; }

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

如果要将div置于其父级中心，则该div必须具有小于100％的宽度。例如：

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

例如：http://jsfiddle.net/nRKYV/

Answer 2

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

#these {
    text-align: center;
}

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

Answer 3

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

最后，只有在知道<div>的高度后才能这样做。你想要做的就是绝对定位，屏幕顶部和左边50％，边缘高度/宽度的一半。

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

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

Answer 4

使用此tutorial作为指导。首先使用此css添加centered课程。

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

将此类添加到您的div：

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

问题在于它位于div的左上角。因此，您需要从width中减去margin-left的一半，从height减去margin-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方法。

Answer 5

最简单的解决方案（fiddle）：

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;
}

另一个选项（fiddle）：

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  */
}

将div放在非常简单的页面上

5 个答案: