How can you align an image inside of a containing div?
Example
In my example, I need to vertically center the <img> in the <div> with class ="frame":
<div class="frame" style="height: 25px;">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
.frame's height is fixed and the image's height is unknown. I can add new elements in .frame if that's the only solution. I'm trying to do this on Internet Explorer 7 and later, WebKit, Gecko.
See the jsfiddle here.
.frame {
height: 25px; /* Equals maximum image height */
line-height: 25px;
width: 160px;
border: 1px solid red;
text-align: center;
margin: 1em 0;
}
img {
background: #3A6F9A;
vertical-align: middle;
max-height: 25px;
max-width: 160px;
}<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=250 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=25 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=23 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=21 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=19 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=17 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=15 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=13 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=11 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=9 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=7 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=5 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=3 />
</div>This question is related to
css
image
vertical-alignment
The answer is
This code work well for me.
<style>
.listing_container{width:300px; height:300px;font: 0/0 a;}
.listing_container:before { content: ' ';display: inline-block;vertical-align: bottom;height: 100%;}
.listing_container img{ display: inline-block; vertical-align: middle;font: 16px/1 Arial sans-serif; max-height:100%; max-width:100%;}
<style>
<div class="listing_container">
<img src="http://www.advancewebsites.com/img/theme1/logo.png">
</div>
Using table and table-cell method do the job, specially because you targeting some old browsers as well, I create a snippet for you which you can run it and check the result:
.wrapper {_x000D_
position: relative;_x000D_
display: table;_x000D_
width: 300px;_x000D_
height: 200px;_x000D_
}_x000D_
_x000D_
.inside {_x000D_
vertical-align: middle;_x000D_
display: table-cell;_x000D_
}<div class="wrapper">_x000D_
<div class="inside">_x000D_
<p>Centre me please!!!</p>_x000D_
</div>_x000D_
<div class="inside">_x000D_
<img src="https://cdn2.iconfinder.com/data/icons/social-icons-circular-black/512/stackoverflow-128.png" />_x000D_
</div>_x000D_
</div> There is a super easy solution with flexbox!
.frame {
display: flex;
align-items: center;
}
Just for the sake of this being a valid answer I still want to post the jQuery solution again. This works for every element that has the v_align class applied to it. It will be vertical centered in the parent and on resizing of the window it will be recalculated.
$(document).ready(function() {
// Define the class that vertically aligns stuff
var objects = '.v_align';
// initial setup
verticalAlign(objects);
// Register resize event listener
$(window).resize(function() {
verticalAlign(objects);
});
});
function verticalAlign(selector) {
$(selector).each(function(val) {
var parent_height = $(this).parent().height();
var dif = parent_height - $(this).height()
// Should only work if the parent is larger than the element
var margin_top = dif > 0 ? dif/2 : 0;
$(this).css("margin-top", margin_top + "px");
});
}
Try this solution with pure CSS http://jsfiddle.net/sandeep/4RPFa/72/
Maybe it is the main problem with your HTML. You're not using quotes when you define class & image height in your HTML.
CSS:
.frame {
height: 25px; /* Equals maximum image height */
width: 160px;
border: 1px solid red;
position: relative;
margin: 1em 0;
top: 50%;
text-align: center;
line-height: 24px;
margin-bottom: 20px;
}
img {
background: #3A6F9A;
vertical-align: middle;
line-height: 0;
margin: 0 auto;
max-height: 25px;
}
When I work around with the img tag it's leaving 3 pixels to 2 pixels space from top. Now I decrease line-height, and it's working.
CSS:
.frame {
height: 25px; /* Equals maximum image height */
width: 160px;
border: 1px solid red;
margin: 1em 0;
text-align: center;
line-height: 22px;
*:first-child+html line-height:24px; /* For Internet Explorer 7 */
}
img {
background: #3A6F9A;
vertical-align: middle;
line-height: 0;
max-height: 25px;
max-width: 160px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
.frame {
line-height:20px; /* WebKit browsers */
}
The line-height property is rendered differently in different browsers. So, we have to define different line-height property browsers.
Check this example: http://jsfiddle.net/sandeep/4be8t/11/
Check this example about line-height different in different browsers: input height differences in Firefox and Chrome
.frame {
height: 35px; /* Equals maximum image height */
width: 160px;
border: 1px solid red;
text-align: center;
margin: 1em 0;
display: table-cell;
vertical-align: middle;
}
img {
background: #3A6F9A;
display: block;
max-height: 35px;
max-width: 160px;
}
The key property is display: table-cell; for .frame. Div.frame is displayed as inline with this, so you need to wrap it in a block element.
This works in Firefox, Opera, Chrome, Safari and Internet Explorer 8 (and later).
UPDATE
For Internet Explorer 7 we need to add a CSS expression:
*:first-child+html img {
position: relative;
top: expression((this.parentNode.clientHeight-this.clientHeight)/2+"px");
}
I am not sure about Internet Explorer, but under Firefox and Chrome, if you have an img in a div container, the following CSS content should work. At least for me it works well:
div.img-container {
display: table-cell;
vertical-align: middle;
height: 450px;
width: 490px;
}
div.img-container img {
max-height: 450px;
max-width: 490px;
}
Solution using a table and table cells
Sometimes it should be solved by displaying as table/table-cell. For example, a fast title screen. It is a recommended way by W3 also. I recommend you check this link called Centering a block or image from W3C.org.
The tips used here are:
- Absolute positioning container displayed as table
- Vertical aligned to center content displayed as table-cell
.container {_x000D_
position: absolute;_x000D_
display: table;_x000D_
width: 100%;_x000D_
height: 100%;_x000D_
}_x000D_
.content {_x000D_
display: table-cell;_x000D_
vertical-align: middle;_x000D_
}<div class="container">_x000D_
<div class="content">_x000D_
<h1 style="text-align:center">Peace in the world</h1>_x000D_
</div>_x000D_
</div>Personally I actually disagree about use helpers for this purpose.
If you can live with pixel-sized margins, just add font-size: 1px; to the .frame. But remember, that now on the .frame 1em = 1px, which means, you need to set the margin in pixels too.
http://jsfiddle.net/feeela/4RPFa/96/
Now it's not centered any more in Opera…
For centering an image inside a container (it could be a logo) besides some text like this:
Basically you wrap the image
.outer-frame {_x000D_
border: 1px solid red;_x000D_
min-height: 200px;_x000D_
text-align: center; /* Only to align horizontally */_x000D_
}_x000D_
_x000D_
.wrapper{_x000D_
line-height: 200px;_x000D_
border: 2px dashed blue;_x000D_
border-radius: 20px;_x000D_
margin: 50px_x000D_
}_x000D_
_x000D_
img {_x000D_
/* height: auto; */_x000D_
vertical-align: middle; /* Only to align vertically */_x000D_
}<div class="outer-frame">_x000D_
<div class="wrapper">_x000D_
some text_x000D_
<img src="http://via.placeholder.com/150x150">_x000D_
</div>_x000D_
</div>This works for modern browsers (2016 at time of edit) as shown in this demo on codepen
.frame {
height: 25px;
line-height: 25px;
width: 160px;
border: 1px solid #83A7D3;
}
.frame img {
background: #3A6F9A;
display:inline-block;
vertical-align: middle;
}
It is very important that you either give the images a class or use inheritance to target the images that you need centered. In this example we used .frame img {} so that only images wrapped by a div with a class of .frame would be targeted.
You could do this:
Demo
CSS
.frame {
height: 25px; /* Equals maximum image height */
line-height: 25px;
width: 160px;
border: 1px solid red;
text-align: center;
margin: 1em 0;
position: relative; /* Changes here... */
}
img {
background: #3A6F9A;
max-height: 25px;
max-width: 160px;
top: 50%; /* Here.. */
left: 50%; /* Here... */
position: absolute; /* And here */
}
JavaScript
$("img").each(function(){
this.style.marginTop = $(this).height() / -2 + "px";
})
This way you can center an image vertically (demo):
div{
height: 150px; // Internet Explorer 7 fix
line-height: 150px;
}
img{
vertical-align: middle;
margin-bottom: 0.25em;
}
You can use this:
.loaderimage {
position: absolute;
top: 50%;
left: 50%;
width: 60px;
height: 60px;
margin-top: -30px; /* 50% of the height */
margin-left: -30px;
}
I have been playing around with using padding for center alignment. You will need to define the top level outer-container size, but the inner container should resize, and you can set the padding at different percentage values.
<div class='container'>
<img src='image.jpg' />
</div>
.container {
padding: 20%;
background-color: blue;
}
img {
width: 100%;
}
Also, you can use Flexbox to achieve the correct result:
.parent {_x000D_
align-items: center; /* For vertical align */_x000D_
background: red;_x000D_
display: flex;_x000D_
height: 250px;_x000D_
/* justify-content: center; <- for horizontal align */_x000D_
width: 250px;_x000D_
}<div class="parent">_x000D_
<img class="child" src="https://cdn2.iconfinder.com/data/icons/social-icons-circular-black/512/stackoverflow-128.png" />_x000D_
</div>This might be useful:
div {
position: relative;
width: 200px;
height: 200px;
}
img {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
.image {
min-height: 50px
}
A pure CSS solution:
.frame {_x000D_
margin: 1em 0;_x000D_
height: 35px;_x000D_
width: 160px;_x000D_
border: 1px solid red;_x000D_
position: relative;_x000D_
}_x000D_
_x000D_
img {_x000D_
max-height: 25px;_x000D_
max-width: 160px;_x000D_
position: absolute;_x000D_
top: 0;_x000D_
bottom: 0;_x000D_
left: 0;_x000D_
right: 0;_x000D_
margin: auto;_x000D_
background: #3A6F9A;_x000D_
}<div class=frame>_x000D_
<img src="http://jsfiddle.net/img/logo.png" height=250 />_x000D_
</div>_x000D_
<div class=frame>_x000D_
<img src="http://jsfiddle.net/img/logo.png" height=25 />_x000D_
</div>_x000D_
<div class=frame>_x000D_
<img src="http://jsfiddle.net/img/logo.png" height=23 />_x000D_
</div>_x000D_
<div class=frame>_x000D_
<img src="http://jsfiddle.net/img/logo.png" height=21 />_x000D_
</div>_x000D_
<div class=frame>_x000D_
<img src="http://jsfiddle.net/img/logo.png" height=19 />_x000D_
</div>_x000D_
<div class=frame>_x000D_
<img src="http://jsfiddle.net/img/logo.png" height=17 />_x000D_
</div>_x000D_
<div class=frame>_x000D_
<img src="http://jsfiddle.net/img/logo.png" height=15 />_x000D_
</div>_x000D_
<div class=frame>_x000D_
<img src="http://jsfiddle.net/img/logo.png" height=13 />_x000D_
</div>_x000D_
<div class=frame>_x000D_
<img src="http://jsfiddle.net/img/logo.png" height=11 />_x000D_
</div>_x000D_
<div class=frame>_x000D_
<img src="http://jsfiddle.net/img/logo.png" height=9 />_x000D_
</div>_x000D_
<div class=frame>_x000D_
<img src="http://jsfiddle.net/img/logo.png" height=7 />_x000D_
</div>_x000D_
<div class=frame>_x000D_
<img src="http://jsfiddle.net/img/logo.png" height=5 />_x000D_
</div>_x000D_
<div class=frame>_x000D_
<img src="http://jsfiddle.net/img/logo.png" height=3 />_x000D_
</div>Key stuff
// position: relative; - in .frame holds the absolute element within the frame
// top: 0; bottom: 0; left: 0; right: 0; - this is key for centering a component
// margin: auto; - centers the image horizontally & vertically
My solution: http://jsfiddle.net/XNAj6/2/
<div class="container">
<div class="frame">
<img src="http://jsfiddle.net/img/logo.png" class="img" alt="" />
</div>
</div>
.container {
display: table;
float: left;
border: solid black 1px;
margin: 2px;
padding: 0;
background-color: black;
width: 150px;
height: 150px;
}
.frame {
display: table-cell;
text-align: center;
vertical-align: middle;
border-width: 0;
}
.img {
max-width: 150px;
max-height: 150px;
vertical-align: middle;
}
Want to align an image which have after a text / title and both are inside a div?
See on JSfiddle or Run Code Snippet.
Just be sure to have an ID or a class at all your elements (div, img, title, etc.).
For me works this solution on all browsers (for mobile devices you must to adapt your code with: @media).
h2.h2red {_x000D_
color: red;_x000D_
font-size: 14px;_x000D_
}_x000D_
.mydivclass {_x000D_
margin-top: 30px;_x000D_
display: block;_x000D_
}_x000D_
img.mydesiredclass {_x000D_
margin-right: 10px;_x000D_
display: block;_x000D_
float: left; /* If you want to allign the text with an image on the same row */_x000D_
width: 100px;_x000D_
heght: 100px;_x000D_
margin-top: -40px /* Change this value to adapt to your page */;_x000D_
}<div class="mydivclass">_x000D_
<br />_x000D_
<img class="mydesiredclass" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Wikipedia-logo-v2-en.svg/2000px-Wikipedia-logo-v2-en.svg.png">_x000D_
<h2 class="h2red">Text aligned after image inside a div by negative manipulate the img position</h2>_x000D_
</div>You could try setting the CSS of PI to display: table-cell; vertical-align: middle;
An easy way which work for me:
img {
vertical-align: middle;
display: inline-block;
position: relative;
}
It works for Google Chrome very well. Try this one out in a different browser.
A three-line solution:
position: relative;
top: 50%;
transform: translateY(-50%);
This applies to anything.
From here.
You can try the below code:
.frame{_x000D_
display: flex;_x000D_
justify-content: center;_x000D_
align-items: center;_x000D_
width: 100%;_x000D_
}<div class="frame" style="height: 25px;">_x000D_
<img src="http://jsfiddle.net/img/logo.png" />_x000D_
</div>matejkramny's solution is a good start, but oversized images have a wrong ratio.
Here's my fork:
Demo: https://jsbin.com/lidebapomi/edit?html,css,output
HTML:
<div class="frame">
<img src="foo"/>
</div>
CSS:
.frame {
height: 160px; /* Can be anything */
width: 160px; /* Can be anything */
position: relative;
}
img {
max-height: 100%;
max-width: 100%;
width: auto;
height: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
I was looking for a similar answer and some of the suggestions snapped the image to the left or the vertical ratio squashed the image, so I came up with this solution... It centers the content vertically and horizontally.
.div{
position: relative;
overflow: hidden;
}
.bantop img {
position: absolute;
margin: auto;
width: 103%;
height: auto;
top: -50%;
bottom: -50%;
left: -50%;
right: -50%;
}
I use it on several projects and it works like a charm.
I had the same problem. This works for me:
<style type="text/css">
div.parent {
position: relative;
}
img.child {
bottom: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
}
</style>
<div class="parent">
<img class="child">
</div>
The best solution is that
.block{
/* Decor */
padding:0 20px;
background: #666;
border: 2px solid #fff;
text-align: center;
/* Important */
min-height: 220px;
width: 260px;
white-space: nowrap;
}
.block:after{
content: '';
display: inline-block;
height: 220px; /* The same as min-height */
width: 1px;
overflow: hidden;
margin: 0 0 0 -5px;
vertical-align: middle;
}
.block span{
vertical-align: middle;
display: inline-block;
white-space: normal;
}
Imagine you have
<div class="wrap">
<img src="#">
</div>
And css:
.wrap {
display: flex;
}
.wrap img {
object-fit: contain;
}
CSS Grid
If you want to align a single image vertically inside an image container you can use this:
.img-container {
display: grid;
}
img {
align-self: center;
}
.img-container {
display: grid;
grid-auto-flow: column;
background: #BADA55;
width: 1200px;
height: 500px;
}
img.vertical-align {
align-self: center;
}<div class="img-container">
<img src="https://picsum.photos/300/300" />
<img class="vertical-align" src="https://picsum.photos/300/300" />
<img src="https://picsum.photos/300/300" />
</div>If you want to align multiple images inside an image container you can use this:
.img-container {
display: grid;
align-items: center;
}
.img-container {
display: grid;
grid-auto-flow: column;
align-items: center;
background: #BADA55;
width: 1200px;
height: 500px;
}<div class="img-container">
<img src="https://picsum.photos/300/300" />
<img src="https://picsum.photos/300/300" />
<img src="https://picsum.photos/300/300" />
</div>Please note that I have used grid-auto-flow: column in both the cases because otherwise the elements wrap to a row with specifying explicit grid items. In the question code, I see the item centered horizontally too. In that case, just make use of the place-items: center instead of align-items: center.
Use this one:
position: absolute;
top: calc(50% - 0.5em);
left: calc(50% - 0.5em);
line-height: 1em;
And you can vary font-size.
Background image solution
I removed the image element altogether and set it as background of the div with a class of .frame
This at least works fine on Internet Explorer 8, Firefox 6 and Chrome 13.
I checked, and this solution will not work to shrink images larger than 25 pixels height. There is a property called background-size which does set the size of the element, but it is CSS 3 which would conflict with Internet Explorer 7 requirements.
I would advice you to either redo your browser priorities and design for the best available browsers, or get some server-side code to resize the images if you'd want to use this solution.
You can use table structure inside a div
<div class="frame">
<table width="100%">
<tr>
<td vertical-align="middle" align="center" height="25">
<img src="https://jsfiddle.net/img/logo.png" >
</td>
</tr>
</table>
</div>
You can use a grid layout to vertically center the image.
.frame {
display: grid;
grid-template-areas: "."
"img"
"."
grid-template-rows: 1fr auto 1fr;
grid-template-columns: auto;
}
.frame img {
grid-area: img;
}
This will create a 3 row 1 column grid layout with unnamed 1 fraction wide spacers at the top and bottom, and an area named img of auto height (size of the content).
The img will use the space it prefers, and the spacers at top and bottom will use the remaining height split to two equal fractions, resulting in the img element to be vertically centered.
For a more modern solution, and if there is no need to support legacy browsers, you can do this:
.frame {_x000D_
display: flex;_x000D_
/**_x000D_
Uncomment 'justify-content' below to center horizontally._x000D_
? Read below for a better way to center vertically and horizontally._x000D_
**/_x000D_
_x000D_
/* justify-content: center; */_x000D_
align-items: center;_x000D_
}_x000D_
_x000D_
img {_x000D_
height: auto;_x000D_
_x000D_
/**_x000D_
? To center this image both vertically and horizontally,_x000D_
in the .frame rule above comment the 'justify-content'_x000D_
and 'align-items' declarations,_x000D_
then uncomment 'margin: auto;' below._x000D_
**/_x000D_
_x000D_
/* margin: auto; */_x000D_
}_x000D_
_x000D_
/* Styling stuff not needed for demo */_x000D_
.frame {_x000D_
max-width: 900px;_x000D_
height: 200px;_x000D_
margin: auto;_x000D_
background: #222;_x000D_
}_x000D_
p {_x000D_
max-width: 900px;_x000D_
margin: 20px auto 0;_x000D_
}_x000D_
img {_x000D_
width: 150px;_x000D_
}<div class="frame">_x000D_
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9988/hand-pointing.png">_x000D_
</div>Here's a Pen: http://codepen.io/ricardozea/pen/aa0ee8e6021087b6e2460664a0fa3f3e
Source: Stackoverflow.com