您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要介绍如何设置css字体单行居中,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
设置css字体单行居中的方法:首先创建一个div;然后在div里写上一个p标签;最后通过设置“text-align: center;”属性实现单行居中即可。
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字体单行居中”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。