Question

为什么中间元素不符合vertical-align规则？

我怎么能这样做？

示例：

<div id="outer">
  <!-- why doesn't this obey its inline-block and snap to bottom? -->
  <div id="inner">From The Smiths</div>
</div>

CSS：

#outer{
top: 0.452873563218px; 
left: 23.8988505747126px; 
transform: rotate(0deg); 
-webkit-transform: rotate(0deg); 
width: 284.88275862069px; 
height: 58.8229885057471px; 
z-index: 5; 
font-size: 8.81226053639847px; 
position: absolute; 
overflow: hidden;
margin: 0;
padding: 0;
}

#inner{
top: 0px;  
left: 0px; 
font-family: 'Open Sans'; 
text-align: center; 
vertical-align: bottom; 
color: rgb(140, 149, 157); 
font-weight: 300; 
font-size: 8.81226053639847px; 
position: relative; 
display: inline-block; 
width: 100%;
margin: 0;
height: 10px;
padding: 0;
overflow: hidden;

}

链接到jsbin：http://jsbin.com/mavuhikifi/2/

Answer 1

您可以将外部div设置为display：table，将内部div设置为：table-cell

＆＃13;

#outer {
    top: 0.452873563218px;
    left: 23.8988505747126px;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    width: 284.88275862069px;
    height: 58.8229885057471px;
    z-index: 5;
    font-size: 8.81226053639847px;
    position: absolute;
    overflow: hidden;
    margin: 0;
    padding: 0;
    display: table;
}
#inner {
    top: 0px;
    left: 0px;
    font-family:'Open Sans';
    text-align: center;
    vertical-align: bottom;
    color: rgb(140, 149, 157);
    font-weight: 300;
    font-size: 8.81226053639847px;
    position: relative;
    display: table-cell;
    width: 100%;
    margin: 0;
    height: 10px;
    padding: 0;
    overflow: hidden;
}

＆＃13;

<div id="outer">
    <!-- why doesn't this obey its inline-block and snap to bottom? -->
    <div id="inner">From The Smiths</div>
</div>

＆＃13;

或使用绝对/相对定位，如 jsFiddle 。

元素不服从垂直对齐：底部，为什么？

1 个答案: