https://zhidao.baidu.com/question/1382508971599615780.html?qq-pf-to=pcqq.c2c
下图分为上下两部分，红色和紫红色是图片（尺寸不同），蓝色为文字。
下半部分是我想要的效果，而目前在网页中显示的排版是如 上半部分的
请问如何使同一个DIV中的图片、文字全部水平对齐？
下半部分是我想要的效果，而目前在网页中显示的排版是如 上半部分的
请问如何使同一个DIV中的图片、文字全部水平对齐？
推荐于2016-05-30 13:22:53
最佳答案
1、图片和文字各放入独立的块级容器。然后以padding-top或margin-top来控制。
2、对图片添加样式vertical-align:middle;如：<div><img src="url" style="vertical-align:middle;" />文字</div>
其他回答
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 .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结构代码：
|
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>
|
以上均供参考，图片文字均可垂直居中，希望能帮到你。