DIV内图片文字如何水平对

https://zhidao.baidu.com/question/1382508971599615780.html?qq-pf-to=pcqq.c2c

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

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

• 

白驹皎皎  |  浏览 18384 次

推荐于2016-05-30 13:22:53

最佳答案

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

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

 本回答由提问者推荐

评论 

28  33

野渡孤苇 

采纳率：45% 擅长： 图像处理软件 常见软件 魔兽世界 Html/Css

其他回答

3种方法：

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

css：

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<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 .c 100 { width : 100px ;} .gd .c 50 { width : 50px ;} .gd .c 800 { 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结构代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

< 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：

1 2 3 4 5 6 7 8 9 10

<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结构代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

< 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：

1 2 3 4 5 6 7 8 9 10

<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结构代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

< 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 >

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