Necesitaba crear una lista con un índice de lista personalizado que esté centrado verticalmente en el contenido de los elementos de la lista.

Como ya estoy usando flex, pensé que lo más fácil podría ser darle al elemento de lista un display:flex; y darle estilo. Esto funciona, pero tan pronto como el elemento de la lista contiene otros elementos, está en mal estado . Como puede ver en el ejemplo a continuación .

¿Cuál es la mejor manera de centrar verticalmente el índice de lista?

- Ejemplo actualizado -

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>
6
Stefan Kunze 29 dic. 2016 a las 18:32

3 respuestas

La mejor respuesta

La solución podría ser utilizar display:table, en lugar de flex, en este caso particular.

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>
2
Ason 29 dic. 2016 a las 23:26

Aquí hay un método con posicionamiento absoluto para mantener las flechas centradas verticalmente.

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>
1
Jon Uleis 29 dic. 2016 a las 17:58

Creo que la mejor opción es envolver todos los elementos dentro de li en otro elemento y eso debería solucionar el problema.

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>
3
Nenad Vracar 29 dic. 2016 a las 15:38