CSS中的文本居中功能可以通過以下方式實現:
text-align: center;
這個屬性可以作用于所有的文本元素,包括段落、標題、列表項等。使用該屬性可以讓文本在其容器中水平居中。以下是一個簡單的示例:
div { width: 200px; height: 200px; background-color: #ccc; text-align: center; } p { font-size: 24px; color: #fff; }
這是一個居中的段落
如果想要垂直居中文本,可以使用以下方法:
div { display: flex; align-items: center; justify-content: center; }
這個方法需要將容器設置為彈性盒子,然后使用align-items和justify-content屬性將其中的子元素水平和垂直居中。以下是一個示例:
div { height: 200px; background-color: #ccc; display: flex; align-items: center; justify-content: center; } p { font-size: 24px; color: #fff; }
這是一個垂直居中的段落
總之,使用CSS的文本居中功能可以讓頁面的排版更美觀、更易讀。