Diese Frage hat hier bereits eine Antwort:

Ich habe ein sehr einfaches Problem in der vertikalen Mitte aspan mitBootstrap 2.3.2.

Bedarf:

Es gibt zwei Spalten, die linke Spalte hat eine feste Höhe von 300px, da sich darin 300x300 Bilder befinden.

Die rechte Spalte enthält Text und muss basierend auf der linken Spalte zentriert werden.

Das Ganze muss ansprechbar sein. Deshalb benutze ich responsive image.

Wenn die zweite Spalte nach unten zeigt, muss ihre Höhe der Textgröße entsprechen. Das heißt, ich kann keine feste Höhe für die zweite Spalte festlegen.

Darf nicht mit JS gelöst werden.

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;
}

Mein Code: http://jsfiddle.net/qhoc/F9ewn/1/

Sie können sehen, was ich oben getan habe: Ich habe im Grunde die zweite Spalte gesetztspan als Tisch undmiddle das.content Tabellenzelle. Diese Methode habe ich hier kopiertSo verwenden Sie die vertikale Ausrichtung in Bootstrap (mit Arbeitsbeispiel hierhttp://jsfiddle.net/lharby/AJAhR/)

Meine Herausforderung ist aufgrund der oben genannten Anforderungen etwas anders. Irgendeine Idee, wie es funktioniert? Vielen Dank.