如何使用 css 在居中对齐中设置单个子元素？
[英]How can I set single child element in center align using css?
问题描述
I have multiple child element in parent that divided with 3 columns and from 4 element goes to second row with left align:
我在父元素中有多个子元素，它们分为 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>
But, when I have only a single child in my <ul> list, I want single child column into center.但是，当我的<ul>列表中只有一个孩子时，我希望单个孩子列居中。
2 个解决方案
解决方案1
3 2020-02-14 19:20:41
Since the maximum number per row is 3 you can handle each case alone.由于每行的最大数量为 3，您可以单独处理每个案例。 You have only 2:你只有 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>
解决方案2
0 2020-02-14 17:20:33
You can use CSS 3 Flexbox to achieve your specific requirement.您可以使用 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>
Ref: https://www.w3schools.com/css/css3_flexbox.asp参考： https : //www.w3schools.com/css/css3_flexbox.asp
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.