Question

怎么用DIV+CSS实现图片和文字垂直中心对齐

有个图片和一些文字，要求标题文字和图片垂直中心对齐，内容文字和图片左对齐.

用li或者不用都总是会出现标题文字和图片的底部对齐

如图

Answer 1

一行文字可以通过line-height和高度相同来实现垂直中心对齐，图片的话可以给图片添加vertical-align:middle;来实现，示例如下：

<style>
p{line-height:100px;hieght:100px;text-align:center;}
div{height:200px;text-align:center;}
div img{vertical-align:middle;width:80px;height:80px;}
</style>
<p>示例文字</p>
<div><img src="图片"/></div>

如果是多行文字的话就得用到CSS的表格特性来做，示例如下：

<style>
.box { position: relative; width: 200px; height: 200px; margin: 40px auto 0 auto; background: #282d33; border: solid 1px #171717; box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.4); color: #bbb; }
.box .tag { position: absolute; top: -11px; left: 70px; width: 60px; height: 20px; background: #1b1b1b; border: solid 1px #171717; text-align: center; }

/* IE6+ 支持图片和多行文字水平垂直居中 */
.ie_imgText { display: table; width: 200px; height: 200px; text-align: center; *position: relative; }
.ie_imgText .cell { vertical-align: middle; display: table-cell; *position: absolute; *top: 50%; *left: 50%; }
.ie_imgText .content { *position: relative; *top: -50%; *left: -50%; }
</style>
<div class="box">
  <div class="ie_imgText">
    <div class="cell">
      <div class="content">
        <img src="图片" alt="">
        <p>文字文字</p>
        <p>文字文字文字</p>
      </div>
    </div>
  </div>
</div>

Answer 2

没看到图。不过你这种情况可以试试用表格，用DIV和CSS比较麻烦。

追问

W3C标准不是说不要用表格么，所以还是说说怎么用DIV+CSS吧

追答

你即使用了Table，W3C也不会有意见：）

追问

但是最好还是按标准来做啊，跟随潮流。。。

Answer 3

碰到居中对齐的问题建议用table的vertical-align去实现，当然如果要垂直居中的标签是固定高度的话，也可以用绝对定位或者是margin去实现，有什么地方还不明白的话可以hi我

追问

不用表格..

追答

哪条W3C规定不要用table了，table和div最大的区别就是页面加载的时候，table是一次性加载，div是一块一块加载，其它情况下，适需求择优使用，在单纯的这种需求下，table相对简单，如果你实在不想用的话，就用绝对定位或margin去实现吧，你会发现实现起来会有很多局限