Estoy tratando de hacer mi bootstrap columnas actúan como tds, o encontrar alguna otra manera para que ellos tengan la misma altura y vertical centrada en el texto. He intentado hacer lo que display:table-cell hack pero sin ningún éxito. ¿Qué estoy haciendo mal abajo?

Violín: https://jsfiddle.net/DTcHh/18560/

<div class="row like-table-row">
  <div class="col-xs-8 col-sm-10 col-md-10 col-lg-10">
      <p>
         Here's some text that will surely be long enough to go onto another line if I make it thiiiiiiiiiiiiiiiiiiiiiiiiiisssssssssssssssssssssssss long
      </p>
  </div>
  <div class="col-xs-2 col-sm-1 col-md-1 col-lg-1">
       <p>
           Here's some shorter text
       </p>
  </div>
  <div class="col-xs-2 col-sm-1 col-md-1 col-lg-1">
       <p>
           Blah     
       </p>
  </div>
</div>
<div class="row like-table-row">
  <div class="col-xs-8 col-sm-10 col-md-10 col-lg-10">
      <p>
         Here's some text
      </p>
  </div>
  <div class="col-xs-2 col-sm-1 col-md-1 col-lg-1">
       <p>
           Here's some shorter text
       </p>
  </div>
  <div class="col-xs-2 col-sm-1 col-md-1 col-lg-1">
       <p>
           Blah     
       </p>
  </div>
</div>

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

.row.like-table-row { display: table-row; }
  .row.like-table.row > div { display: table-cell; vertical-align: middle; border: 1px solid #000; }

4 Comentarios

  1. 3

    Estás haciendo todo bien, excepto la eliminación de la float, (Si no quitar el flotador, se rompe el diseño de la tabla.)

    .row.like-table-row {
        display: table-row;
    }
    
    .row.like-table.row > div {
        display: table-cell;
        vertical-align: middle;
        border: 1px solid #000;
        float:none;
    }

    Esto debería funcionar bien.

    P. S. he usado mucho esa técnica, pero se han parado alguna vez desde el advenimiento de la Flexbox.

  2. 0

    Tiene un error tipográfico en el nombre de la clase: .la fila.como-table-row > div. Ahora seguir adelante y eliminar los flotadores para obtener los divs verticalmente en el centro. He actualizado el violín así: https://jsfiddle.net/vikasbaru/DTcHh/18566/

      .row.like-table-row > div { display: table-cell; vertical-align: middle; border: 1px solid #000; float: none; }
  3. 0

    Para uso vertical align usted necesita un contenedor que tiene la vertical de la propiedad align y un elemento interior que estar alineadas.

    Básicamente hay tres reglas css:

    .vertical-align {
      height: 150px; /* Height is important or it won't work */
      display: table-cell; /* We will give our div table cell property */
      vertical-align: middle; /* This will do the trick to center vertically inner element */
    }

    Por lo que el código html se verá así:

    <div class="col-xs-2 col-sm-1 col-md-1 col-lg-1">
      <div class="vertical-align">
        <p>Foo bar</p>
      </div>
    </div>

    Su ejemplo en jsfiddle: https://jsfiddle.net/mb3kyzgp/1/

    Si usted necesita dinámico de altura, sugiero utilizar jQuery para calcular más alto del elemento, o usted puede fijar una altura que creo que no se alcance (fácil y rápido, pero no el mejor).

Dejar respuesta

Please enter your comment!
Please enter your name here