Ik'gebruik Twitter Bootstrap 3, en ik heb problemen wanneer ik twee div
verticaal wil uitlijnen, bijvoorbeeld - [JSFiddle link][1]:
<!-- 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>
Het grid systeem in Bootstrap gebruikt float: left
, niet display:inline-block
, dus de eigenschap vertical-align
werkt niet'niet. Ik heb geprobeerd om margin-top
te gebruiken om het op te lossen, maar ik denk dat dit geen goede oplossing is voor het responsive design.
Dit antwoord presenteert een hack, maar ik zou je ten zeerste aanraden om flexbox te gebruiken (zoals vermeld in @Haschem antwoord), aangezien het'nu overal wordt ondersteund.
Demos link:
Je kunt nog steeds een custom class gebruiken als je die nodig hebt:
<!-- 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;
}
Het gebruik van inline-block
voegt extra ruimte toe tussen blokken als je een echte spatie in je code laat staan (zoals ...</div> </div>...
). Deze extra ruimte breekt ons raster als de kolomgroottes bij elkaar opgeteld 12 zijn:
<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>
Hier hebben we'extra spaties tussen <div class="[...] col-lg-2">
en <div class="[...] col-lg-10">
(een carriage return en 2 tabs/8 spaties). En zo...
Laten we die extra spatie wegschoppen!!!
<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>
Let op de schijnbaar nutteloze opmerkingen <!-- ... -->
? Ze zijn belangrijk -- zonder deze zal de witruimte tussen de <div>
elementen ruimte innemen in de layout, waardoor het rastersysteem wordt verbroken.
Note: de Bootply is bijgewerkt
Probeer dit in de CSS van de div:
display: table-cell;
vertical-align: middle;
Ik vind echt dat de volgende code werkt met Chrome en niet met andere browsers dan het huidige geselecteerde antwoord:
.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;
}
Mogelijk moet u de hoogtes aanpassen (specifiek op .v-center
) en div op div[class*='col-']
verwijderen/wijzigen voor uw behoeften.