您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息

怎么设置css字体单行居中

2025/9/30 7:02:30发布19次查看
设置css字体单行居中的方法:首先创建一个div;然后在div里写上一个p标签;最后通过设置“text-align: center;”属性实现单行居中即可。
本教程操作环境:dell g3电脑、windows7系统、html5&&css3版本。
css设置字体单行居中
1、首先为了便于观察,先创建一个div
<style> .app{ width: 200px; height: 100px; border: 1px solid skyblue; }</style><div class="app"> </div>
2、然后在div里写上一个p标签,并设置它text-align: center;属性实现单行居中。
<style> .app{ width: 200px; height: 100px; border: 1px solid skyblue; } .app > p{ text-align: center; overflow: hidden;  text-overflow:ellipsis; white-space: nowrap; }</style><div class="app"> <p>hello world!</p></div>
3、若是span之类的行内元素,可以给它的父级元素添加text-align: center;属性
<style> .app{ width: 200px; height: 100px; text-align: center; border: 1px solid skyblue; }</style><div class="app"> <span>hello world!</span></div>
4、单行文本实现垂直居中,设置line-height和父级元素的高度相同即可。
<style> .app{ width: 200px; height: 100px; text-align: center; border: 1px solid skyblue; } .app > span{ line-height: 100px; }</style><div class="app"> <span>hello world!</span></div>
推荐:《css视频教程》
以上就是怎么设置css字体单行居中的详细内容。
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录 Product