Menu
I needed to create a list with a custom list-index which is vertically centered to the content of the list items.
As I am using flex already I thought the easiest might be to give the list-item a display:flex; and style it. This works, but as soon, as the list-item contains other elements it is messed up. As you can see in the example below.
Whats the best way to vertically center the list-index?
-- Updated Example --
ol {
list-style: none;
padding: 0;
width: 200px;
}
ol > li {
display: flex;
margin-top: 20px;
align-items: center;
}
ol > li:before {
color: red;
content: attr(data-count)' ›';
flex display: block;
flex-shrink: 0;
text-align: right;
min-width: 24px;
padding-right: 5px;
}<ol>
<li data-count="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
<li data-count="10">Lorem ipsum dolor sit <span>amet</span>, consectetur adipisicing elit</li>
<li data-count="999">Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
</ol>
927
The text content can be aligned vertically by setting the following display properties: align-items. justify-content. flex-direction.
align-items and justify-content are the important properties to absolutely center text horizontally and vertically. Horizontally centering is managed by the justify-content property and vertical centering by align-items.
To center a div vertically and horizontally using flexbox, you need to wrap the div or div's inside a container with properties ' display: flex; flex-direction: column; justify-content: center;align-items: center; ', then just make the div ' text-align: center; ' if it has text.
The vertical-align property in CSS controls how elements set next to each other on a line are lined up. In order for this to work, the elements need to be set along a baseline. As in, inline (e.g. <span> , <img> ) or inline-block (e.g. as set by the display property) elements.
I think that the best option is to wrap all elements inside li in one other element and that should fix the problem.
ul {
list-style: none;
padding: 0;
width: 200px;
}
ul > li {
display: flex;
margin-top: 20px;
align-items: center;
}
ul > li:before {
color: red;
content: '›';
flex display: block;
flex-shrink: 0;
text-align: center;
width: 30px;
}<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
<li>
<p>Lorem ipsum dolor sit <span>amet</span>, consectetur adipisicing elit</p>
</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
</ul>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
