Centering an auto-sized image both horizontally and vertically
I searched many times and found quite a few answers to this problem, but none of them worked when I tried them in my particular setup. Here is a JSFiddle of the problem I am trying to solve:
http://jsfiddle.net/kr394ye2/1/
.classA {
background-color: yellow;
width: 50px;
height: 50px;
float: left;
}
.classB {
width: auto;
height: auto;
max-width: 50px;
max-height: 50px;
}
<div class="classA">
<img class="classB" src="https://www.google.com/logos/doodles/2015/ida-b-wells-153rd-birthday-4853060954226688-hp.jpg"></img>
</div>
I am trying to get an image that is automatically set in the div that contains it to be centered both horizontally and vertically in the div. I cannot make the image a background div.
I've tried autosupplies with different display types (inline, inline-block). I tried the text-align property as well as vertical-align. I have tried center tag. Nothing I've tried worked.
The solution is to center the image both horizontally and vertically.
source to share
You can use inline block + pseudo element tags.
.classA {
background-color: yellow;
width: 50px;
height: 50px;
float: left;
text-align: center;
font-size: 0;
}
.classA:after {
content: "";
height: 100%;
display: inline-block;
vertical-align: middle;
}
.classB {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
display: inline-block;
vertical-align: middle;
}
<div class="classA">
<img class="classB" src="https://www.google.com/logos/doodles/2015/ida-b-wells-153rd-birthday-4853060954226688-hp.jpg">
</div>
Please note, the solution only works if the image is the only child inside the container, plus the container has a known height.
BTW, <img>
is a self-closing tag, <img></img>
is not a valid syntax, just use <img src="">
or <img src="" />
.
source to share
If you need vertical and horizontal centering then this is what you need
http://jsfiddle.net/M_Elf/38kgyzwu/2/
at all
margin:0 auto;
works wonders
or else: if you only need horizontal centering, just use
margin-left:auto;
margin-right:auto;
on the main wrapper
source to share
Change your CSS to the following:
.classA {
background-color: yellow;
width: 50px;
height: 50px;
padding: 5px;
}
.classB {
display: block; margin: auto;
object-fit: cover;
max-width: 100%;
height: 100%;
}
CSS object-fit: cover
helps to fit the image without losing quality.
More on object-fit
here: object-fit - MDN Docs
source to share
Here you go - you need four lines of code (not including the vendor css prefixes):
-
text-align: center;
the parent element does the trick for horizontal positioning -
position: relative;
top: 50%;
transform: translateY(-50%);
centers the image vertically
I've added two blocks with different sizes, but the same different properties so you can see that it is versatile. Checked that it works consistently in latest chrome, safari, IE10 and Opera versions.
.classA {
background-color: yellow;
width: 300px;
height: 50px;
float: left;
text-align: center;
}
.classB {
width: auto;
height: auto;
max-width: 300px;
max-height: 50px;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.classA2 {
background-color: yellow;
width: 100px;
height: 70px;
float: left;
text-align: center;
}
.classB2 {
width: auto;
height: auto;
max-width: 100px;
max-height: 70px;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.separator {
display: block;
clear:both;
padding:20px;
}
<div class="classA">
<img class="classB" src="https://www.google.com/logos/doodles/2015/ida-b-wells-153rd-birthday-4853060954226688-hp.jpg"></img>
</div>
<div class="separator"></div>
<div class="classA2">
<img class="classB2" src="https://www.google.com/logos/doodles/2015/ida-b-wells-153rd-birthday-4853060954226688-hp.jpg"></img>
</div>
Hope it helps :)
source to share