在动态高度的 div 中垂直居中内容

Question

在动态高度的 div 中垂直居中内容

csshtmlcenter

4

可能重复：
如何在动态高度的div中垂直居中HTML元素

我正在设计一个网站，需要垂直居中一些内容。设计非常基础：固定高度的页眉（左对齐，始终位于页面顶部），并在其下方以水平行排列的方式垂直居中图像（是的，水平滚动，我知道）。

理想情况下，我希望图像的垂直居中是基于视口的100％高度 - 页眉（因此是动态高度，可防止内容重叠在页眉上）。

可以在http://bit.ly/vl1XNY上找到该网站的示例，该示例当前正在使用表格进行布局。其中还可以找到我使用的CSS和HTML（当然）。

我知道有各种解决方案可以在固定高度的容器内垂直居中内容，但是由于我使用可变高度并且不想使用绝对定位（以防止重叠），所以它们都没有起作用。我已经尝试过表格单元格解决方案、行高解决方案和绝对定位解决方案。

到目前为止，唯一能够完全按照我的意愿工作的解决方案是使用表格。但我想避免使用它们。有人知道这个问题的有效的CSS和HTML解决方案吗？或者至少有一个更优雅的解决方案吗？

- user1059636

表格单元格解决方案应该具有与使用表格元素相同的效果。您也可以尝试：http://www.student.oulu.fi/~laurirai/www/css/middle/#valhib - Gerben

如果使用50%的绝对定位不起作用...我个人会使用表格。这并不是整个网站都由表格构成，而是表格数据（以某种方式），因此没有任何问题。你的示例使用了表格... - Yisela

@utopicam，是的，我想我会继续使用表格，因为它似乎是这种布局的唯一解决方案。顺便说一下，我链接的示例就是我迄今为止想出的解决方案。是的，它使用了表格，因为这是实现我想要的布局的唯一方法。很遗憾不仅仅是图像在表格中，整个页面都在表格中，但这是我能够实现所需外观的唯一方式。 - user1059636

是的，使用自动高度将无法正常工作，您需要使用JavaScript计算当前视口高度。 - Beatriz Oliveira

2个回答

0

你可以尝试以下代码：

<div style="display:table-cell;">
    <img src="..." style="... vertical-align:middle;">
    <img src="..." style="... vertical-align:middle;">
</div>

请在所有HTML上下文中检查上述代码：

<style type="text/css">
    html, body {height:100%;}
        body {
        margin:0; padding:0;
    }
    #header {
        height:1.7em;
    }

    #content {
        display:table-cell; vertical-align:middle; height:500px;
    }

</style>

<div id="header"></div>    
<div id="content">
    <img src="..." style="... vertical-align:middle;">
    <img src="..." style="... vertical-align:middle;">
</div>

这只适用于固定高度的表格单元格，可以通过使用JavaScript计算当前视口高度来实现

- Beatriz Oliveira

谢谢你的建议。我已经尝试了，但是对于我来说，它只适用于固定高度，当使用可变高度（如100％）时，它不起作用（例如：http://bit.ly/vFqBw0）。有什么建议吗？ - user1059636

尝试使用http://bit.ly/6c3Ixl扩展您的建议，但由于标题无法再完全拉伸到100％，因此此方法不起作用。请参见http://bit.ly/uX9Nz1。 - user1059636

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andres Ilich · Accepted Answer

哇，谈到时机真是巧合，几分钟前我还在寻找这样的解决方案，然后偶然发现了一篇关于这个主题的文章，你可以在这里阅读所有内容：居中未知尺寸元素。

你可以轻松修改你的代码让它像这样工作：

CSS

#wrapper {
    background: none repeat scroll 0 0 blue;
    height: 100%;
    text-align: center;
}

#wrapper:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.center {
    display: inline-block;
    padding: 10px 15px;
    vertical-align: middle;
    width: 460px;
}

HTML

->

HTML

<div id="wrapper">
    <div class="center">
        <img src="images/a_1.jpg" alt=" ">
    </div>
    <div class="center">
        <img src="images/a_2.jpg" alt=" ">
    </div>
</div>