Question

我正在制作一个自适应网站，因此与我合作的大多数元素都具有未知的高度。这就是我得到的......

 <div class="main">
   <div class="submenu">
     <ul>
       <li><a href="#">Lorem</a></li>
       <li><a href="#">Lorem</a></li>
       <li><a href="#">Lorem</a></li>
       <li><a href="#">Lorem</a></li>
     </ul>
   </div>
 </div>

CSS：

 .main {
 background: #0e0e0e;
 width: 80%;
 margin: auto;
 position: relative;
 }

 .main .submenu {
 background: #e62e7a;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 15%;
 }

 .submenu ul {
 background: pink;
 float: left;
 height: 100%;
 }

 .submenu ul li {
 display: block;
 float: left;
 }

 .submenu ul li a {
 background: rgba(0,0,0,0.5);
 padding: 8px;
 }

好。所以我在div中有一个比例大小的div，其高度和宽度都在变化。我有两个问题：

1）如何将.submenu div中代码末尾的锚点垂直居中？显然百分比线高度不起作用，我不知道为什么，但表格显示技巧也不起作用。

2）在锚点中，填充也会逃脱其父边界。文本完全位于顶部，但锚点的填充透明黑色背景正在逃避父级。那是为什么？

P.S。至于.main高度我添加了一个div内部，填充顶部为50％，以设置其高度相对于其宽度。

Answer 1

本文可能有所帮助：http://css-tricks.com/centering-in-the-unknown/

基本上，使用display: table-cell;，您可以对内容使用vertical-align: middle;。

这是一个更新后使用此方法的JSFiddle：

http://jsfiddle.net/yVn7Z/

更新了CSS：

html, body {
    margin: 0;
    height: 100%;
    width: 100%;
    display: table;
}
.main {
    height: 100%;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.main .submenu {
    background: pink;
    margin: 0 auto;
    display: table;
}
.submenu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.submenu ul li {
    display: table-cell;
}
.submenu ul li a {
    background: rgba(0, 0, 0, 0.5);
    padding: 8px;
    display: block;
}

如何将一个元素垂直居中在另一个元素中，同时具有未知的高度？

1 个答案: