很多時候,您需要使用HTML和CSS將一些文本居中。但是,最好的方法是什么呢?在本文中,我將向您展示如何在 CSS 中使用該屬性,并向您展示如何使用 CSS 彈性框垂直對齊文本。我還將討論標(biāo)簽以及為什么您不應(yīng)該使用它來使文本居中。text-align
如何在 CSS 中使用屬性text-align
當(dāng)您使用標(biāo)題或段落標(biāo)簽時,HTML 中的默認(rèn)樣式會將文本放置在頁面的左側(cè)。
在此示例中,我們有一個放置在頁面左上角的。<h1>
如果我們想在頁面上水平居中該文本,則可以使用該屬性。text-align
如果要使頁面上的所有文本水平居中,則可以在正文選擇器中使用該屬性。text-align
在下一個示例中,我們的 HTML 中還有更多文本。
沒有任何樣式,它目前在頁面上看起來像這樣。
在我們的CSS中,我們可以定位選擇器并使用屬性。bodytext-align
如何使文本水平和垂直居中
該屬性用于在頁面上將文本水平居中。但是我們也可以使用CSS彈性框來垂直居中文本。text-align
在這個例子中,我們的HTML中有一些文本:
這是它目前沒有任何樣式的樣子。
我們可以使用該物業(yè)。<h2>text-align
然后,我們可以使用彈性框?qū)⒍温渌胶痛怪钡鼐又械?div 中。flex-container
你應(yīng)該使用中心標(biāo)簽嗎?
在較舊版本的 HTML 中,標(biāo)記被用作在頁面上水平使文本居中的一種方式。<center>
許多新的開發(fā)人員仍將使用此標(biāo)記,因為它確實顯示了正確的結(jié)果。但是,該標(biāo)記在 HTML 4 中已棄用,因為最佳做法是改用 CSS 屬性。<center>text-align
這是來自 MDN 文檔的棄用警告
重要的是要記住,HTML用于內(nèi)容,而CSS用于樣式。最佳做法是將這兩個問題分開,并且不要將 HTML 用于樣式設(shè)置目的。
我希望你喜歡這篇關(guān)于如何使用HTML和CSS使文本居中的文章。