![](/img/trans.png)
[英]How can I center align an element correctly when it contains a child element floated right?
[英]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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.