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

最新推荐文章于 2022-08-12 17:17:39 发布

飞翔的雪鹰

最新推荐文章于 2022-08-12 17:17:39 发布

阅读量5k

点赞数

CC 4.0 BY-SA版权

分类专栏： div+css

本文链接：https://blog.youkuaiyun.com/u012581409/article/details/41013459

div+css 专栏收录该内容

4 篇文章

订阅专栏

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

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

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

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

实际验证结果：IE6 OK， FIREFOX 3 OK。一、形如ABCDEF格式行设置SPAN为固定宽度的方法如下：
span {width:60px; text-align:center; display:block; float:left;}
实际验证结果：IE6 OK， FIREFOX 3 OK。
2. 形如ABCDEFGH格式行设置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>、标签的宽高等属性不可定制的元素特性；
display:inline-block;——“全”可定制属性的元素特性；
补充：1、如何让<li>AAABBB</li>里头的BBB靠右对齐且不换行？
答：如果对span使用float属性，总是导致span换到下一行。

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

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

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