图像不垂直对齐：中间答案

【问题标题】：Image not vertical-align:middle图像不垂直对齐：中间
【发布时间】：2011-06-21 03:48:04
【问题描述】：

我有 1 个包装 h2 的 div 和包装在带有 img 类的 div 中的图像。 h2 是 float:left 和 img float:right。

img div 里面有图片。我想要的是

如果图像的高度和宽度比它的 not vertical-align:middle 高 100 像素。请帮忙。

用vertical-align:middle测试

CSS

.ver-mainbox{float:left; width:898px; border:1px solid #c3c3c3; padding:0px; height:122px; margin-bottom:15px; background-color:#ffffff;}
.ver-mainbox h2{font-size:18px;color:#000; padding-left:10px; margin:0px; vertical-align:middle; width:500px; float:left; padding-top:42px;}
.ver-mainbox .img{float:right; padding:0px; width:186px; height:122px;}

HTML

<div class="mainbox-area">
        <!-- Box start v1 -->
        <div class="ver-mainbox">                                                   
            <h2>Immunizations</h2>
            <div class="img"><img src="../../Content/images/v1.gif" alt="" title="" /></div>
        </div>                                                
        <!-- Box start v1 -->                                                               
</div>

【问题讨论】：

CSS 中的垂直对齐很少能如你所愿。除非容器有一个集合line-height 或者是display: table-cell，否则垂直对齐只适用于当前的文本行，而不适用于它在容器中的位置。这里有很好的例子：css-tricks.com/2597-what-is-vertical-align
@Marc B 感谢您的回复。你能修复我的代码吗？

标签： html xhtml

【解决方案1】：

vertical-align 仅适用于表格单元格。您需要重新考虑如何处理此问题或使用 display:table-* 属性。

   <div style="display:table">                                               
        <h2 style="display:table-cell;vertical-align:middle">Immunizations</h2>
        <div style="display:table-cell;vertical-align:middle">
            <img src="../../Content/images/v1.gif" alt="" title="" />
        </div>
   </div>

【讨论】：

CSS 在很大程度上与 SEO 无关，除非你在隐藏东西。
@SpliFF，这是错误的。根据CSS2 specifications：适用于：inline-level 和 'table-cell' 元素