CSS：替代vertical-align？ [英] CSS : alternative to vertical-align?

问题描述

vertical-align有什么替代方法吗？

Is there any alternative to vertical-align?

对于使用垂直对齐，我必须将显示设置为table-cell。当我将显示设置为table-cell时，我设置的div的高度不工作。我有overflow-y设置为自动上的div。我想做的是将div内部的内容从div底部对齐...我不能这样做..任何替代方案？

For using vertical align I am having to set the display to table-cell. When I have the display set to table-cell the height of the div that I have set does not work. I have overflow-y set to auto on that div. What I am trying to do is align the content inside the div from the bottom of that div... I am not able to do that.. Any alternatives?

是我现在所拥有的：

#container{
height:375px;
border:1px solid #000;
position:relative;
overflow-y:auto;
display:table-cell;
vertical-align:bottom;
}

#container > div{
margin:0;
margin-bottom:5px;
width:660px;
position:relative;
}

推荐答案

是设置 line-height ..另一个是设置父元素为 position：relative; 将子元素设置为 position：absolute; ，然后使用 top：50％; 和 left：50％; ，然后扣除将是 height 和 width 的绝对元素本身...

There are 2 alternatives, one is to set line-height.. and other one is to set the parent element to position: relative; and than set your child element to position: absolute; and later, use top: 50%; and left: 50%; and than deduct the margins which will be 1/2 of the total height and width of the absolute element itself...

.parent {
   position: relative;
}

.child {
   position: absolute;
   top: 50%;
   left: 50%;
   margin-top: -100px; /* Assuming height of the element is 200 */
   margin-left: -200px; /* Assuming width of the element is 400 */
}

---

这里有一个catch，但使用 absolute 将需要固定的元素的维度 align 垂直中心

---

Here's a catch though, using absolute will require fixed dimensions of the element you are trying to align vertically center

垂直使用 display：table-cell;

演示

.parent {
    height: 200px;
    background: #eee;
    display: table-cell;
    width: 300px;
    vertical-align: bottom;
}

.child {
    height: 20px;
    background: #aaa;
}

此外，如果使用表; 作为包装元素。

Also it would be better if you use display: table; as a wrapping element.

这篇关于CSS：替代vertical-align？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！