CSS中如何把Span标签等行内元素设置为固定宽度及div中内容垂直居中

本文介绍了如何通过CSS为行内元素设置固定宽度,包括多种行内元素组合的情况,并提供了在div中实现内容垂直居中的方法。通过设置display属性为inline-block,可以实现在不同浏览器环境下的完美兼容。此外,文章还分享了如何让列表项内的元素靠右对齐且不换行的实用技巧。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、行内元素设置固定宽度

1. 形如<span>ABC</span>独立行设置SPAN为固定宽度方法如下:span {width:60px; text-align:center; display:block; }

实际验证结果:IE6 OK, FIREFOX 3 OK。一、形如<span>ABC</span>DEF格式行设置SPAN为固定宽度的方法如下:
span {width:60px; text-align:center; display:block; float:left;}
实际验证结果:IE6 OK, FIREFOX 3 OK。
2. 形如ABC<span>DEF</span>GH格式行设置SPAN为固定宽度的方法如下:span {width:60px; text-align:center; display:inline-block;}
实际验证结果:IE6 OK, FIREFOX 3 OK。
提示: 完美兼容就是把display属性设为inline-block,同时也可兼容前两种情况。
block,inline,inline-block的区别:
display:block;——类似与DIV标签的宽高边距等属性均可定制的元素特性;
display:inline;——类似与<a>、<strong>标签的宽高等属性不可定制的元素特性;
display:inline-block;——“全”可定制属性的元素特性;
补充:1、如何让<li>AAA<span>BBB</span></li>里头的BBB靠右对齐且不换行?
答:如果对span使用float属性,总是导致span换到下一行。

可以采用下面方法实现同行且居右对齐。li { position:relative;}li span{ position:absolute;right:0px;}即可实现。


二、设置div中内容垂直居中

    height:45px;
    line-height:45px;
    overflow:hidden;




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值