本教程操作环境: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字体单行居中的详细内容。
