HTML 中設計頁面特效,字體居中是一種常見需求。在 HTML 中,使用 CSS 樣式表可以輕松的實現字體居中效果。
一、單行文本居中
使用 CSS 樣式表中設置 text-align 屬性可以實現單行文本居中,代碼如下:
注:以上代碼主要是用于表格數據居中,text-align 屬性為水平居中,vertical-align 屬性為垂直居中。
總結
HTML 中使用 CSS 樣式表可以實現各種文本居中的效果。通過以上的介紹,我們可以輕松的實現單行文本居中、多行文本居中以及表格數據居中等多種效果。在實際開發過程中,可以根據具體需求,選擇不同方法進行實現。
注:style 標簽可以在 head 中設置,也可以在 HTML 元素中直接設置。 二、多行文本居中 使用 CSS 樣式表中設置 display 屬性和 margin 屬性可以實現多行文本居中,代碼如下:Hello World!
注:以上代碼使用 flex 布局實現,justify-content 屬性為水平居中,align-items 屬性為垂直居中,height 屬性為元素高度,margin 屬性為外邊距。 三、表格數據居中 使用 CSS 樣式表中設置 text-align 屬性和 vertical-align 屬性可以實現表格數據居中,代碼如下:Hello World!
Cell 1 | Cell 2 |