div中的p标签于img设置同一水平_DIV内图片文字如何水平对齐 如图

本文介绍了三种方法将div中的图片和文字设置在同一水平线上并实现垂直居中:1) 使用div+css,适用于现代浏览器;2) 采用table布局,兼容所有浏览器但维护不便;3) 相对定位法,适用于静态和动态网站,支持所有浏览器。每种方法的优缺点及示例代码都有详细说明。
摘要由CSDN通过智能技术生成

展开全部

3种方法:

1)div+css /w3c 好处:div+css,代码编译好;不足之处:不支持ie6 7 8浏览器32313133353236313431303231363533e59b9ee7ad9431333335326261

css:

.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;}

html结构代码:

red

pink

blue

black

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

css:

.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;}

html结构代码:

red

pink

blue

black

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

css:

.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;}

html结构代码:

red

pink

blue

black

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值