[英]How can I set single child element in center align using css?
我在父元素中有多個子元素，它們分為 3 列，從 4 個元素轉到第二行，左對齊：
ul { list-style: none; display: flex; align-items: center; justify-content: flex-start; flex-flow: wrap; } li { width: 33.33%; flex: 0 0 33.33%; padding: 15px 0; background: #000; color: #fff; font-size: 1rem; text-align: center; margin-bottom: 15px; }
<ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Four</li> </ul>
但是，當我的<ul>列表中只有一個孩子時，我希望單個孩子列居中。
由於每行的最大數量為 3，您可以單獨處理每個案例。 你只有 2 個：
ul { list-style: none; display: flex; align-items: center; flex-flow: wrap; padding:0; margin:5px; } li { flex: 0 0 33.33%; padding: 15px 0; background: #000; color: #fff; font-size: 1rem; text-align: center; margin-bottom: 15px; } /*1 item */ li:only-child { margin:auto; } /*2 item */ li:nth-child(1):nth-last-child(2) { margin-left:auto; } li:nth-child(2):nth-last-child(1) { margin-right:auto; }
<ul> <li>One</li> </ul> <ul> <li>One</li> <li>Two</li> </ul> <ul> <li>One</li> <li>Two</li> <li>Three</li> </ul> <ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Four</li> </ul>
您可以使用 CSS 3 Flexbox 來實現您的特定要求。
ul { display: flex; width: 150px; flex-flow: row wrap; justify-content: space-around; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> </ul> <ul> <li>One</li> </ul> <ul> <li>One</li> <li>Two</li> </ul> <ul> <li>One</li> <li>Two</li> <li>Three</li> </ul> </body> </html>
當元素包含右浮動的子元素時，如何正確居中對齊？
[英]How can I center align an element correctly when it contains a child element floated right?
如何為進入中心容器的最后一個元素設置左對齊？
[英]How can I set a left align for the last element which is into a center container?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.