您好,登錄后才能下訂單哦!
這篇文章主要介紹如何設(shè)置css字體單行居中,文中介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們一定要看完!
設(shè)置css字體單行居中的方法:首先創(chuàng)建一個div;然后在div里寫上一個p標(biāo)簽;最后通過設(shè)置“text-align: center;”屬性實現(xiàn)單行居中即可。
css設(shè)置字體單行居中
1、首先為了便于觀察,先創(chuàng)建一個div
<style> .app{ width: 200px; height: 100px; border: 1px solid skyblue; } </style> <div class="app"> </div>
2、然后在div里寫上一個p標(biāo)簽,并設(shè)置它text-align: center;屬性實現(xiàn)單行居中。
<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之類的行內(nèi)元素,可以給它的父級元素添加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、單行文本實現(xiàn)垂直居中,設(shè)置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>
以上是“如何設(shè)置css字體單行居中”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。