it-swarm.com.de

Richten Sie die Mitte vertikal mit dem ansprechenden Bootstrap-Raster aus

Ich habe ein sehr einfaches Problem in der vertikalen Mitte einer span mit Bootstrap 2.3.2 .

Anforderungen:

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

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

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

  4. 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.

  5. 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 span als Tabelle und middle als .content als Tabellenzelle festgelegt. Ich habe diese Methode hierher kopiert. Wie verwende ich die vertikale Ausrichtung in Bootstrap? (mit Arbeitsbeispiel hierher http://jsfiddle.net/lharby/AJAhR/ )

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

11
HP.

Fügen Sie die !important-Regel zu display: table Ihrer .v-center-Klasse hinzu. 

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

Ihre Anzeigeeigenschaft wird von Bootstrap auf display: block überschrieben. 

Beispiel

12
Morpheus
.row {
    letter-spacing: -.31em;
    Word-spacing: -.43em;
}
.col-md-4 {
    float: none;
    display: inline-block;
    vertical-align: middle;
}

Hinweis: .col-md-4 kann jede Rasterspalte sein, hier nur ein Beispiel.

0
arithran