vertical-alignment - 元素不遵守垂直对齐 : bottom, 为什么？

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 设置为 display:table-cell

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

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

或者像 jsFiddle那样使用绝对/相对定位.