Et enkelt bruksscenario er å bruke et bilde eller annet innhold i en Bootstrap-kolonne. Og ofte må dette innholdet sentreres horisontalt.
<div class="container">
<div class="row">
<div class="col-sm-4 col-md-4 col-lg-4 text-center">
<img class="img-responsive" src="img/some-image.png" title="this image needs to be centered">
</div>
<div class="col-sm-8 col-md-8 col-lg-8">
some content not important at this moment
</div>
</div>
</div>
I versjon 3.1.0 la jeg til klassen text-center for å sentrere bildet i kolonnen. Men jeg ble tvunget til å gå til versjon 3.3.4 for å fikse noen andre problemer, og denne oppførselen (tekstsentrering) er nå ødelagt. Jeg sitter igjen med problemet med å sentrere et bilde eller annet innhold i en kolonne. Jeg vil gjerne unngå å måtte legge til klasse til inneholdte elementer, da dette er feilutsatt eller krever en annen inneholdende div.
Vil du sentrere et bilde? Bootstrap har to klasser, .center-block
og text-center
.
Bruk førstnevnte hvis bildet ditt er et BLOCK
-element, for eksempel hvis du legger til img-responsive
-klassen til img
, blir img
et blokkelement. Dette bør du vite hvis du vet hvordan du navigerer i webkonsollen og ser hvilke stiler som er brukt på et element.
Vil du ikke bruke en klasse? Ikke noe problem, her er CSS som bootstrap bruker. Du kan lage en egendefinert klasse eller skrive en CSS-regel for elementet for å matche Bootstrap-klassen.
// In case you're dealing with a block element apply this to the element itself
.center-block {
margin-left:auto;
margin-right:auto;
display:block;
}
// In case you're dealing with a inline element apply this to the parent
.text-center {
text-align:center
}
Du kan gjøre dette ved å legge til en div, dvs. centerBlock. Og gi denne egenskapen i CSS for å sentrere bildet eller annet innhold. Her er koden:
<div class="container">
<div class="row">
<div class="col-sm-4 col-md-4 col-lg-4">
<div class="centerBlock">
<img class="img-responsive" src="img/some-image.png" title="This image needs to be centered">
</div>
</div>
<div class="col-sm-8 col-md-8 col-lg-8">
Some content not important at this moment
</div>
</div>
</div>
// CSS
.centerBlock {
display: table;
margin: auto;
}