Používám Twitter Bootstrap 3 a mám problémy, když chci zarovnat vertikálně dva divy
, například - [JSFiddle link][1]:
-- begin snippet: js hide: false -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-xs-5">
<div style="height:5em;border:1px solid #000">Big</div>
</div>
<div class="col-xs-5">
<div style="height:3em;border:1px solid #F00">Small</div>
</div>
</div>
Mřížkový systém v Bootstrapu používá float: left
, nikoli display:inline-block
, takže vlastnost vertical-align
nefunguje. Zkoušel jsem to vyřešit pomocí margin-top
, ale myslím, že to není dobré řešení pro responzivní design.
Tato odpověď představuje hack, ale vřele bych vám doporučil použít flexbox (jak je uvedeno v odpovědi @Haschem), protože je nyní všude podporován.
Odkaz na ukázku:
Stále můžete použít vlastní třídu, když ji potřebujete:
<!-- language: lang-html -->
<div class="row">
<div class="col-xs-5 col-md-3 col-lg-1 vcenter">
<div style="height:10em;border:1px solid #000">Big</div>
</div><!--
--><div class="col-xs-5 col-md-7 col-lg-9 vcenter">
<div style="height:3em;border:1px solid #F00">Small</div>
</div>
</div>
<!-- language: lang-css -->
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}
Použití inline-block
přidá další mezeru mezi bloky, pokud v kódu necháte skutečnou mezeru (jako ...</div> </div>...
). Tato mezera navíc rozbije naši mřížku, pokud se velikost sloupců sečte na 12:
<div class="row">
<div class="col-xs-6 col-md-4 col-lg-2 vcenter">
<div style="height:10em;border:1px solid #000">Big</div>
</div>
<div class="col-xs-6 col-md-8 col-lg-10 vcenter">
<div style="height:3em;border:1px solid #F00">Small</div>
</div>
</div>
Zde máme navíc mezery mezi <div class="[...] col-lg-2">
a <div class="[...] col-lg-10">
(návrat vozíku a 2 tabulátory/8 mezer). A tak...
Vykopneme tuhle mezeru navíc!!!
<div class="row">
<div class="col-xs-6 col-md-4 col-lg-2 vcenter">
<div style="height:10em;border:1px solid #000">Big</div>
</div><!--
--><div class="col-xs-6 col-md-8 col-lg-10 vcenter">
<div style="height:3em;border:1px solid #F00">Small</div>
</div>
</div>
Všimněte si zdánlivě zbytečných komentářů <!-- ... -->
? Jsou důležité -- bez nich by bílé znaky mezi prvky <div>
zabíraly místo v rozvržení a narušovaly by mřížkový systém.
Poznámka: Bootply byl aktualizován
Zkuste to v CSS divu:
display: table-cell;
vertical-align: middle;
Následující kód skutečně funguje v prohlížeči Chrome a ne v jiných prohlížečích než v aktuálně zvolené odpovědi:
.v-center {
display:table!important; height:125px;
}
.v-center div[class*='col-'] {
display: table-cell!important;
vertical-align:middle;
float:none;
}
.v-center img {
max-height:125px;
}
Možná budete muset změnit výšky (konkrétně na .v-center
) a odstranit/změnit div na div[class*='col-']
pro vaše potřeby.