Esta pregunta ya tiene una respuesta aquí:

Tengo un problema muy simple en medio vertical aspan utilizandoBootstrap 2.3.2.

Requisitos:

Hay dos columnas, la columna izquierda tiene una altura fija de 300px porque hay una imagen de 300x300 en su interior.

La columna derecha tiene texto y debe estar centrada en la columna izquierda.

Todo el asunto debe ser receptivo. Es por eso que estoy usando una imagen sensible.

Si la segunda columna baja a la parte inferior, su altura debe ajustarse al tamaño del texto. Eso significa que no puedo establecer una altura fija en la segunda columna.

No debe usar JS para resolver esto.

HTML:

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span6">
        <img class="img-responsive" src="http://placehold.it/300x300"/>
    </div>
    <div class="span6 v-center">
        <div class="content">
            <h1>Title</h1>
            <p>Paragraph</p>
        </div>
    </div>
  </div>
</div>

CSS:

.v-center {
    display:table;
    border:2px solid gray;
    height:300px;
}

.content {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

Mi código: http://jsfiddle.net/qhoc/F9ewn/1/

Puedes ver lo que hice arriba: básicamente puse la segunda columnaspan como mesa ymiddle la.content mesa-celda. Copié ese método aquíCómo usar la alineación vertical en bootstrap (con ejemplo de trabajo aquíhttp://jsfiddle.net/lharby/AJAhR/)

Mi desafío es un poco diferente debido a los requisitos anteriores. ¿Alguna idea de cómo hacer que funcione? Gracias.