CSS中有時需要對字體進行居中或左對齊處理。
首先,要將想要居中或左對齊的文本封裝在一個div或其他容器中。
<div class="centered-text"> 居中的文本 </div> <div class="left-aligned-text"> 左對齊的文本 </div>
然后,我們來看一下如何在CSS中實現相應的樣式。
第一種情況,居中對齊。首先,設置容器元素的display為flex,并且設置justify-content和align-items屬性的值都為center。
.centered-text { display: flex; justify-content: center; align-items: center; }
這段CSS代碼將實現文本在水平和垂直方向上居中對齊。
第二種情況,左對齊。同樣地,設置容器元素的display為flex,但這次只需要設置align-items屬性的值為flex-start。
.left-aligned-text { display: flex; align-items: flex-start; }
這樣我們就可以實現文本在左側對齊的效果了。
當然,還有其他方式可以實現字體居中及左對齊的效果,例如使用text-align屬性、使用float浮動等等。但以上兩種方法都是比較簡單且易于掌握的。
上一篇css 字體大小不同
下一篇html的字體樣式代碼