Question

DIV内图片文字如何水平对齐 如图

下图分为上下两部分，红色和紫红色是图片（尺寸不同），蓝色为文字。
下半部分是我想要的效果，而目前在网页中显示的排版是如 上半部分的

请问如何使同一个DIV中的图片、文字全部水平对齐？

Answer 1

1、图片和文字各放入独立的块级容器。然后以padding-top或margin-top来控制。

2、对图片添加样式vertical-align:middle;如：<div><img src="url" style="vertical-align:middle;" />文字</div>

Answer 2

<style>

img {

vertical-align: middle;

}

</style>

<div>

<img src="u=1126160133,1150686243&fm=58.jpg" height="100"/>

<img src="QQ图片20140522110018.jpg" height="50"/>

<span>阿萨德各位给二哥如果微软</span>

</div>

Answer 3

3种方法：

1）div+css /w3c 好处：div+css，代码编译好；不足之处：不支持ie6 7 8浏览器

css：

<style>
.gd ,.gd div{margin:0 auto; overflow:hidden; display:block;}
.gd{width:1000px;}
.gd .gd_tr{display:table; width:950px;}
.gd .black{width:1000px; color:#fff; background:black;}
.gd .c100{width:100px;}
.gd .c50{width:50px;}
.gd .c800{width:800px;}
/*line-height的值请按需变化使用*/
.gd .red{height:100px; line-height:100px; background:red;}
.gd .pink{height:50px; line-height:50px; background:pink;}
.gd .blue{height:25px; line-height:25px; background:blue;}
.gd .cell{display:table-cell; vertical-align:middle;}
</style>

html结构代码：

<div class="gavin_design gd">
 <div class="gd_tr">
  <div class="cell c100">
   <div class="red">
    red
   </div>
  </div>
  <div class="cell c50">
   <div class="pink">
    pink
   </div>
  </div>
  <div class="cell c800">
   <div class="blue">
    blue
   </div>
  </div>
 </div>
 <div class="black">
  black
 </div>
</div>

2）使用table，好处：方便快捷，支持所有浏览器；不足之处：table维护差，可读性相比div差，修改繁琐，基本固定死难以更改，面向静态内容。

css：

<style>
.gd_table{border-collapse:collapse;}
.gd_table td{vertical-align:middle; height:100px;}
.gd_auto td{height:auto;}
.gd_table td span.s_cell{display:block;}
.gd_table td span.red{background:red; height:100px;}
.gd_table td span.pink{background:pink; height:50px;}
.gd_table td span.blue{background:blue; height:25px;}
.gd_table td span.black{background:black; color:#fff;}
</style>

html结构代码：

<table align="center" width="950" cellpadding="0" cellspacing="0" class="gd_table">
 <tr>
  <td width="100">
   <span class="s_cell red">red</span>
  </td>
  <td width="50">
   <span class="s_cell pink">pink</span>
  </td>
  <td width="800">
   <span class="s_cell blue">blue</span>
  </td>
 </tr>
</table>
<table align="center" width="1000" cellpadding="0" cellspacing="0" class="gd_table gd_auto">
 <tr>
  <td colspan="3">
   <span class="s_cell black">black</span>
  </td>
 </tr>
</table>

3）相对定位法，好处：div+css、可调节、动静态网站均可用，支持全部浏览器；不足之处：维护性差，较为偏向静态网页。

css：

<style>
.gd_pos ,.gd_pos div{margin:0 auto; overflow:hidden; height:auto; display:block;}
.gd_pos{width:1000px;}
.gd_pos .inside{width:950px; height:100px; position:relative; z-index:1;}
.gd_pos .red ,.gd_pos .pink ,.gd_pos .blue{position:absolute; z-index:1; top:50%;}
.gd_pos .red{width:100px; height:100px; margin-top:-50px; left:0; background:red;}
.gd_pos .pink{width:50px; height:50px; margin-top:-25px; left:100px; background:pink;}
.gd_pos .blue{width:800px; height:25px; margin-top:-13px; left:150px; background:blue;}
.gd_pos .black{color:#fff; background:black;}
</style>

html结构代码：

<div class="gd_pos">
 <div class="inside">
  <div class="red">
   red
  </div>
  <div class="pink">
   pink
  </div>
  <div class="blue">
   blue
  </div>
 </div>
 <div class="black">
  black
 </div>
</div>

以上均供参考，图片文字均可垂直居中，希望能帮到你。