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 .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
>
|
以上均供参考,图片文字均可垂直居中,希望能帮到你。