alineación vertical en tramos de arranque

Question

¿Hay alguna forma de solucionar la alineación vertical de elementos o textos en arranque se extiende con respecto a otros tramos

Por ejemplo. si tengo una fila y se extiende como esto

<div class="row-fluid"> 
    <div class="span3" style="background-color:lightblue">Description</div> 
    <div class="span9" style="background-color:pink"> 
    Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum .... 
    </div> 
</div> 

Parece que este

Entonces, ¿hay una manera de mostrar "Descripción" verticalmente centro de la altura de la siguiente división?

Answer 1

Si usted está tratando de centrar verticalmente un elemento para ciertos tamaños de pantalla siempre se puede utilizar consultas de medios de comunicación tales como:

/*tablet*/ 
@media (min-width: 768px) and (max-width: 979px) { 
    #logo{ 
    margin-top:70px; 
    } 
} 
/*desktop*/ 
@media (max-width: 979px) { 
    #logo{ 
    margin-top:20px; 
    } 
} 
/*large desktop*/ 
@media (min-width: 1200px) { 
    #logo{ 
    margin-top:0; 
    } 
} 

Answer 2

$('.row').each(function() { 
    var rowHeight = $(this).height(); 
    $(this).find("[class^='span']").each(function() { 
    if ($(this).height() < rowHeight-20) { 
     var odstep = (rowHeight - $(this).height())/2 ; 
     $(this).css("padding-top", odstep); 
    } 
    }); 
}); 

Answer 3

Se podría probar algunas absolute centering tricks with CSS. Por ejemplo, si está dispuesto a: 1) declarar el alto del div para estar centrado, y 2) hacer su .row-fluidposition: relative;, entonces tal vez this sample could work for you.

resultante de la siguiente DOM:

<div class="row-fluid relative"> 
    <div class="span3"> 
     <div class="vercenter" style="background-color:lightblue">Description</div> 
    </div> 
    <div class="span9" style="background-color:pink">Lorem Ipsum...</div> 
</div> 

y CSS:

.relative { 
    position: relative; 
} 
.vercenter { 
    height: 1.5em; 
    margin: auto; 
    left: 0; 
    top: 0; 
    bottom: 0; 
    position: absolute; 
} 

Answer 4

I trabajado mucho en esto, y se muestra una solución sencilla mediante el uso de jquery aquí!

<script> 
$(document).ready(function(){ 
    var relheight=$('.span9').height()/2; 
    $('.span3').css('margin-top', relheight) ; 

}); 
</script> 

Funciona y lo probé también. Si te gusta mi respuesta, por favor vote por mí

Answer 5

En Bootstrap no hay ninguna disposición para tal problema. Depende de la implantación. Sin embargo, puede escribir una regla css diciendo que si el siguiente div excede la altura de un div anterior alinee el div anterior a la altura del centro del siguiente div & aplique esta clase a los divs donde quiera este tipo de comportamiento.

Answer 6

Echa un vistazo a esta solución sin script.

<div class="row-fluid"> 
    <div class="span3" style="background-color:lightblue;margin:0px auto;float:none;">Description</div> 
    <div class="span9" style="background-color:pink;clear:both;margin:0px auto;float:none;"> 
    Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum .... 
    </div> 
</div> 

El código en acción: jsFiddle

Basta con retirar el estilo en línea y lo coloca en su archivo css.

Answer 7

intento display: table; para los padres y para el niño display: table-cell;

JSFiddle