Wie zentrieren Bootstrap-Spalten, die sich in einer anderen Spalte befinden?

Question

Ich möchte die Divs innerhalb col-md-12 vertikal zentrieren. Das ist die Struktur:

.list-item { 
 
    border-bottom: 1px solid #e7e7e7; 
 
    float: left; 
 
    padding: 15px 0; 
 
    width: 100%; 
 
} 
 
.list-item img { 
 
    width: 60px; 
 
    height: 60px; 
 
} 
 
.col-md-2 { 
 
    float: left; 
 
    width: 16.66666667%; 
 
}

<div class="list-item col-md-12 clearfix"> 
 
    <div class="col-md-1"> 
 
    <img class="img-circle" src="https://aframe.io/aframe/examples/_skies/puydesancy.jpg"> 
 
    </div> 
 
    <div class="col-md-2"> 
 
    <strong> 
 
     <a href="#/buildings/1">Central park</a> 
 
    </strong> 
 
    </div> 
 
    <div class="col-md-5"> 
 
    <span>The description for central park description for the central park</span> 
 
    </div> 
 
    <div class="col-md-2"> 
 
    <span>Category count:</span> 
 
    <strong>3</strong> 
 
    </div> 
 
    <div class="col-md-2"> 
 
    <span>Panorama count:</span> 
 
    <strong>7</strong> 
 
    </div> 
 
</div>

Ich habe versucht: vertical-align: middle und display: inline aber es hat nicht funktioniert. Gibt es eine andere Art und Weise?

Hier ist der JSFiddle: https://jsfiddle.net/wLgfLo3L/

(Sie müssen den Browser auf Vollbild, um die Größe).

Answer 1

Sehr einfache Lösung dafür ist mit diesem CSS.

HMTL

<div class="list-item col-md-12 clearfix main"> 
    <div class="col-md-1 center"> 
    <img class="img-circle" src="https://aframe.io/aframe/examples/_skies/puydesancy.jpg"> 
    </div> 
    <div class="col-md-2 center"> 
    <strong> 
     <a href="#/buildings/1">Central park</a> 
    </strong> 
    </div> 
    <div class="col-md-5 center"> 
    <span>The description for central park description for the central park</span> 
    </div> 
    <div class="col-md-2 center"> 
    <span>Category count:</span> 
    <strong>3</strong> 
    </div> 
    <div class="col-md-2 center"> 
    <span>Panorama count:</span> 
    <strong>7</strong> 
    </div> 
</div> 

CSS

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

In den obigen Codes i .main Klasse Haupt div und .center Klasse hinzugefügt haben Sie Mitte ausrichten möchten, div.

Mit display:table zu main und display:table-cell zum inneren div können Sie das div mit vertical-align:middle ausrichten, weil dies die Art von div in Tabelle umwandelt.

Hier ist die aktualisierte Geige Link es https://jsfiddle.net/yudi/wLgfLo3L/1/