在設計網頁時,有些情況下我們需要讓文字在某個塊級元素中垂直居中對稱,這時候我們可以使用 CSS 實現這個效果。下面是示例代碼:
<div class="box"> <p class="text">垂直居中對稱</p> </div> <style> .box { height: 200px; display: flex; justify-content: center; align-items: center; } .text { font-size: 24px; } </style>
這段代碼中,我們先在一個 div 元素中添加一個 p 元素,然后給這個父元素 box 設定了高度和 display: flex;,并設置 justify-content: center; align-items: center;,實現了水平和垂直居中對稱。而子元素 text 的字體大小則可以根據需要進行調整。
通過這種方式,我們可以在對稱布局中,快速實現文字的垂直居中對稱,讓網頁顯示更加美觀大方。
上一篇css讓數字豎向排列