Скажем, у меня есть 3 divs, отображаемых по горизонтали с помощью flexbox
:
| |-div1-| |-center-div-| |-wider-div-| |
И я хочу, чтобы центр div был выровнен к середине родителя. Как я могу это сделать? justify-content
будет центрировать все 3 из div на основе суммы всех их ширины, и применение align-self: center
к среднему div ничего не делает, потому что свойство align управляет позиционированием на другой оси.
Есть ли отзывчивое решение CSS, или мне нужно прибегнуть к jQuery?
ul {
display: flex;
justify-content: center;
width: 100%;
background-color: purple;
}
li {
background-color: red;
border: 5px solid blue;
list-style: none;
}
<ul>
<li><a href = "#">short</a></li>
<li><a href = "#">want center</a></li>
<li><a href = "#">loooooooooooooooooong</a></li>
</ul>