css文字水平垂直居中怎么設置?下面本篇文章就來給大家介紹使用CSS設置文字水平居中和垂直居中的方法。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有所幫助。
1、文字水平居中
在CSS中想要讓文字水平居中,可以使用text-align:center;。
text-align是一個基本的屬性,它會影響一個元素中的文本行互相間的對齊方式。值left、right和center會導致元素中的文本分別左對齊、右對齊和居中,想要使文本居中,直接使用center即可。
該屬性設置文本和img標簽等一些內聯對象(或與之類似的元素)的居中。
示例:
css 水平居中.box {
width: 300px;
height: 200px;
background: palegoldenrod;
text-align:center;
}
效果圖:
2、文字垂直居中
在CSS中想要讓文字水平居中,可以使用line-height屬性。
line-height 屬性設置行間的距離(行高)。不允許使用負值。
該屬性會影響行框的布局。在應用到一個塊級元素時,它定義了該元素中基線之間的最小距離而不是最大距離。
示例:
css 垂直居中.box {
width: 300px;
height: 300px;
background: paleturquoise;
line-height:300px;
}
效果圖:
更多CSS相關知識,可訪問 CSS教程 !!