Ein einfaches Anwendungsszenario ist die Verwendung eines Bildes oder eines anderen Inhalts innerhalb einer Bootstrap-Spalte. Und oft muss dieser Inhalt horizontal zentriert werden.
<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>
In Version 3.1.0 wurde durch Hinzufügen der Klasse text-center das Bild innerhalb der Spalte zentriert. Aber ich war gezwungen, auf Version 3.3.4 zu wechseln, um einige andere Probleme zu beheben, und dieses Verhalten (text-center) ist jetzt nicht mehr möglich. Ich stehe vor dem Problem, wie ich ein Bild oder einen anderen Inhalt innerhalb einer Spalte zentrieren kann. Ich möchte vermeiden, dass ich den enthaltenen Elementen eine Klasse hinzufügen muss, da dies fehleranfällig ist oder ein weiteres enthaltendes Div erfordert.
Möchten Sie ein Bild zentrieren? Sehr einfach, Bootstrap kommt mit zwei Klassen, .center-block
und text-center
.
Verwenden Sie die erstere, wenn Ihr Bild ein "Block"-Element ist. Wenn Sie zum Beispiel die Klasse img-responsive
zu Ihrem img
hinzufügen, wird das img
zu einem Block-Element. Sie sollten dies wissen, wenn Sie wissen, wie man in der Webkonsole navigiert und die auf ein Element angewandten Stile sieht.
Sie wollen keine Klasse verwenden? Kein Problem, hier ist das CSS, das Bootstrap verwendet. Sie können eine eigene Klasse erstellen oder eine CSS-Regel für das Element schreiben, die der Bootstrap-Klasse entspricht.
// 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
}
Sie können dies tun, indem Sie ein div d.h. centerBlock hinzufügen. Und geben Sie diese Eigenschaft in CSS, um das Bild oder einen Inhalt zu zentrieren. Hier ist der Code:
<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;
}