CSS inline-block 对齐问题答案

【问题标题】：CSS inline-block alignment issueCSS inline-block 对齐问题
【发布时间】：2013-10-26 07:14:44
【问题描述】：

我试图让图片让“.other-wrap”与左边的图片垂直对齐。我尝试添加边距或边框，但由于某种原因，这会将“.other-wrap”向下推并进一步不对齐。谁能解释导致这种行为的原因以及我可以添加到“.other-wrap”以使其对齐而不更改 html 结构的 css。

fiddle

HTML：

<div id="588970897807405-list" class="main">
<div id="588970897807405" class="main-wrap">
   <div class="inner-wrap">
      <div class="inner-name-wrap" style="font-size: 10pt;">
         <div class="inner-name">header</div>
      </div>
      <div class="inner-img-wrap">
         <img id="588970897807405-event-img" class="inner-img" src="http://nodogaboutit.files.wordpress.com/2012/10/j04310181.jpg">
      </div>
      <div class="formatted-footer-wrap" style="font-size: 10pt;">
         <div class="footer">footer</div>
      </div>
   </div>
   <div class="other-wrap">
      <div class="other-inner">
         <div class="other-img-wrap"><img class="other-img" width="120" height="120" src="http://www.petfinder.com/wp-content/uploads/2012/11/99059361-choose-cat-litter-632x475.jpg"></div>
      </div>
   </div>
</div>

CSS：

.main .inner-img{
vertical-align:middle;
margin:auto;
display:block;
width:120px;
height:120px;
top:0px;
}

.other-wrap{

    /*border:solid black 15px;*/
    margin:15px;
}

.main .inner-name-wrap{
    white-space:nowrap;
    width:150px;
    font-size:14px;
    text-overflow:ellipsis;
    font-weight:normal;
    display:block;
    color:white;
    background:black;
}

.main .formatted-footer-wrap{
    color:white;
    display:block;
    font-size:10px;
    width:150px;
    background:black;
}

.main .other-wrap{
    display:inline-block;
    font-size:12px;
}

.main .formatted-time-wrap{
    display:none;
    font-size:10px;
}

.inner-wrap{
    display:inline-block;
    border:solid hsl(0, 100%, 100%) 1px;    
}

【问题讨论】：

真的觉得你需要多花点时间在这上面。我不太赞成投票，但我对此很接近。原因：您正在尝试实现默认行为，而解决方案需要其他人为您解构您的代码并找出导致默认行为不起作用的原因。我建议剥离所有这些，直到它完成它应该做的事情，然后开始重新添加东西，直到你找到破坏它的东西。

标签： css html formatting alignment

【解决方案1】：

看来你需要vertical-align。

试试vertical-align: middle:

.main-wrap{
    font-size: 0; /* To fix extra space due to whitespaces in HTML */
}
.other-wrap, .inner-wrap{
    display:inline-block;
    vertical-align: middle;
    margin: 15px;
}

Demo

【讨论】：