How can I set single child element in center align using css?
Question
I have multiple child element in parent that divided with 3 columns and from 4 element goes to second row with left align:
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.
2 answers
solution1
3 2020-02-14 19:20:41
Since the maximum number per row is 3 you can handle each case alone. You have only 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>
solution2
0 2020-02-14 17:20:33
You can use CSS 3 Flexbox to achieve your specific requirement.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How can I center align an element correctly when it contains a child element floated right?
How can i align the image at center?CSS
How can I make <a> align center and css
how do I center align a content element with wordpress custom css?
How can i center an HTML element on the page using css
How can I set a left align for the last element which is into a center container?
I can't align center a content by using CSS
How to center align an overflowing element in CSS
How can I overlay shapes and align text to its center in CSS?
How can i align my text at center with the SVG element?
Related Tags