Question: How to vertically align the list-index of a list with flexbox?

Question

How to vertically align the list-index of a list with flexbox?

Answers 3
Added at 2016-12-29 16:12
Tags
Question

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>

Answers
nr: #1 dodano: 2016-12-29 16:12

Here's a method with absolute positioning to keep the arrows vertically centered.

ol {
  list-style: none;
  padding: 0;
  width: 200px;
}

ol > li {
  margin: 20px 0 0;
  padding-left: 36px;
  position: relative;
}

ol > li:before {
  color: red;
  content: attr(data-count)' ›';

  font-size: 14px;
  line-height: 1;
  
  position: absolute;
  left: 0;
  top: 50%; /* vertically center */
  margin-top: -7px; /* and shift up based on 16px height */
}
<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>

nr: #2 dodano: 2016-12-29 16:12

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>

nr: #3 dodano: 2016-12-29 21:12

Solution could be to use display:table, instead of flex, in this particular case.

ol {
  list-style: none;
  padding: 0;
  width: 200px;
  display:table;
  border-spacing:0 20px;
}

ol > li {
  display:table-row;
  vertical-align:middle;     
}

ol > li:before {
  color: red;
  content: attr(data-count)' ›';
  display:table-cell;
  vertical-align:middle;
  text-align: right;
  white-space: nowrap;
  padding-right: 10px;
}
<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 99">Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
</ol>

Source Show
◀ Wstecz