Cuando yo uso una Bootstrap badge dentro de la partida como h1,h2,h3 la alineación vertical está apagado. El badge alinea hacia la parte inferior del texto del título. Me gustaría que el insignia para alinear verticalmente con el texto de encabezado.

HTML

<h1><span class="badge">badge</span> Heading 1</h1>
<hr>
<h2><span class="badge">badge</span> Heading 2</h2>
<hr>
<h3><span class="badge">badge</span> Heading 3</h3>

CSS

h1,h2,h3 {
  vertical-align:middle;
}

h1>.badge, h2>.badge, h3>.badge {
  vertical-align:middle;
}

Resultado..

Ver este Bootply: http://bootply.com/88526

Alinear verticalmente Bootstrap insignia dentro de la rúbrica

¿Cómo puedo hacer para alinear en el centro vertical?

InformationsquelleAutor Zim | 2013-10-18

2 Comentarios

  1. 19

    Siempre odió a este problema.

    Un poco chapucero pero funciona esto:

    h1 { font-size: 2em; }
    h2 { font-size: 1.6em; }
    h3 { font-size: 1.4em; }
    h1,h2,h3 {
        vertical-align:middle;
    }
    
      h1>.badge, h2>.badge, h3>.badge {
        vertical-align:middle;
        margin-top: -0.5em;
    }

    Define el título de la fuente tamaños para la demostración de los efectos de

    • Yo era capaz de utilizar un one-liner: h3>.badge { vertical-align: middle }
    • Yo no tenía necesidad de los margin-top (de hecho, la configuración de margin-top mal estado de la alineación).
    • No tenía la necesidad de establecer el vertical-align en h1, h2, h3 – sólo la insignia – de acuerdo con el Brent del comentario.
    • Necesitaba el margin-top también. Gracias chicos.
  2. 2

    En Bootstrap 4, la alineación vertical cuestión ya no es un problema ya que el insignia heredará el tamaño de la que contiene la rúbrica..

    <div class="container">
      <h1><span class="badge badge-pill badge-dark">badge</span> Heading 1</h1>
      <hr>
      <h2><span class="badge badge-pill badge-dark">badge</span> Heading 2</h2>
      <hr>
      <h3><span class="badge badge-pill badge-dark">badge</span> Heading 3</h3>
    </div>

    Sin embargo, la align-middle clase se utiliza para alinear verticalmente insignias de fuera de la partida.

    <div class="container">
      <span class="badge badge-pill badge-dark align-middle">badge</span> <span class="h1 align-middle">Heading 1</span>
      <hr>
      <span class="badge badge-pill badge-dark align-middle">badge</span> <span class="h2 align-middle">Heading 2</span>
      <hr>
      <span class="badge badge-pill badge-dark align-middle">badge</span> <span class="h3 align-middle">Heading 3</span>
    </div>

    Demo: https://www.codeply.com/go/rE0z3665zh

    • Perfecto, gracias!

Dejar respuesta

Please enter your comment!
Please enter your name here