设置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视频教程》
Atas ialah kandungan terperinci 怎么设置css字体单行居中. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!