I have an image inside .img-container. I would like the image to center within the container.
<div class='col-xs-12 col-sm-4 col-lg-4 img-container'>
<img class="img-responsive img-about" src='img/About5001000.jpg'>
</div>
How do you code the CSS the handle different browsers? The only way I know how is to code them (-moz-center, -webkit-center) individually:
.img-container {
padding-right: 0px;
padding-left: 0px;
text-align: -moz-center;
}
or
.img-container {
padding-right: 0px;
padding-left: 0px;
text-align: -webkit-center;
}
this doesn't for either Firefox or Safari or Chrome:
.img-container {
padding-right: 0px;
padding-left: 0px;
text-align: center;
}
Is there a solution that works universally?
Browser prefixes are used for experimental features that either aren't yet ready for general use or are based on parts of the CSS specification that haven't yet been finalised.
To do what you are asking, you would list each vendor prefix after another, with the unprefixed version last. If text-align required vendor prefixes, you would write:
.img-container {
text-align: -moz-center;
text-align: -webkit-center;
text-align: -o-center;
text-align: center;
}
However, text-align: center has existed since the beginning of CSS, and so has never needed prefixes. So you would in fact just write this:
.img-container {
padding-right: 0px;
padding-left: 0px;
text-align: center;
}
The reason this doesn't work for your image is the img-responsive class. In Bootstrap, this makes your image a block element. Block elements cannot be aligned with text-align.
Bootstrap 3 has a built in center-block class which should be added to the img tag...
<div class='col-xs-12 col-sm-4 col-lg-4 img-container'>
<img class="img-responsive img-about center-block" src='img/About5001000.jpg'>
</div>