How to vertically align an image inside a div
The only (and the best cross-browser) way as I know is to use an inline-block
helper with height: 100%
and vertical-align: middle
on both elements.
So there is a solution: http://jsfiddle.net/kizu/4RPFa/4570/
.frame { height: 25px; /* Equals maximum image height */ width: 160px; border: 1px solid red; white-space: nowrap; /* This is required unless you put the helper span closely near the img */
text-align: center; margin: 1em 0;}
.helper { display: inline-block; height: 100%; vertical-align: middle;}
img { background: #3A6F9A; vertical-align: middle; max-height: 25px; max-width: 160px;}
<div class="frame"> <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=250px /></div><div class="frame"> <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=25px /></div><div class="frame"> <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=23px /></div><div class="frame"> <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=21px /></div><div class="frame"> <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=19px /></div><div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=17px /></div><div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=15px /></div><div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=13px /></div><div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=11px /></div><div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=9px /></div><div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=7px /></div><div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=5px /></div><div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=3px /></div>
vertical-align image in div
If you have a fixed height in your container, you can set line-height to be the same as height, and it will center vertically. Then just add text-align to center horizontally.
Here's an example: http://jsfiddle.net/Cthulhu/QHEnL/1/
EDIT
Your code should look like this:
.img_thumb {
float: left;
height: 120px;
margin-bottom: 5px;
margin-left: 9px;
position: relative;
width: 147px;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 3px;
line-height:120px;
text-align:center;
}
.img_thumb img {
vertical-align: middle;
}
The images will always be centered horizontally and vertically, no matter what their size is. Here's 2 more examples with images with different dimensions:
http://jsfiddle.net/Cthulhu/QHEnL/6/
http://jsfiddle.net/Cthulhu/QHEnL/7/
UPDATE
It's now 2016 (the future!) and looks like a few things are changing (finally!!).
Back in 2014, Microsoft announced that it will stop supporting IE8 in all versions of Windows and will encourage all users to update to IE11 or Edge. Well, this is supposed to happen next Tuesday (12th January).
Why does this matter? With the announced death of IE8, we can finally start using CSS3 magic.
With that being said, here's an updated way of aligning elements, both horizontally and vertically:
.container {
position: relative;
}
.container .element {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
Using this transform: translate();
method, you don't even need to have a fixed height in your container, it's fully dynamic. Your element has fixed height or width? Your container as well? No? It doesn't matter, it will always be centered because all centering properties are fixed on the child, it's independent from the parent. Thank you CSS3.
If you only need to center in one dimension, you can use translateY
or translateX
. Just try it for a while and you'll see how it works. Also, try to change the values of the translate
, you will find it useful for a bunch of different situations.
Here, have a new fiddle: https://jsfiddle.net/Cthulhu/1xjbhsr4/
For more information on transform
, here's a good resource.
Happy coding.
Vertically align an image inside a div with responsive height
Here is a technique to align inline elements inside a parent, horizontally and vertically at the same time:
Vertical Alignment
1) In this approach, we create an inline-block
(pseudo-)element as the first (or last) child of the parent, and set its height
property to 100%
to take all the height of its parent.
2) Also, adding vertical-align: middle
keeps the inline(-block) elements at the middle of the line space. So, we add that CSS declaration to the first-child and our element (the image) both.
3) Finally, in order to remove the white space character between inline(-block) elements, we could set the font size of the parent to zero by font-size: 0;
.
Note: I used Nicolas Gallagher's image replacement technique in the following.
What are the benefits?
- The container (parent) can have dynamic dimensions.
There's no need to specify the dimensions of the image element explicitly.
We can easily use this approach to align a
<div>
element vertically as well; which may have a dynamic content (height and/or width). But note that you have to re-set thefont-size
property of thediv
to display the inside text. Online Demo.
<div class="container">
<div id="element"> ... </div>
</div>
.container {
height: 300px;
text-align: center; /* align the inline(-block) elements horizontally */
font: 0/0 a; /* remove the gap between inline(-block) elements */
}
.container:before { /* create a full-height inline block pseudo=element */
content: ' ';
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
height: 100%;
}
#element {
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
font: 16px/1 Arial sans-serif; /* <-- reset the font property */
}
The output
Responsive Container
This section is not going to answer the question as the OP already knows how to create a responsive container. However, I'll explain how it works.
In order to make the height of a container element changes with its width (respecting the aspect ratio), we could use a percentage value for top/bottom padding
property.
A percentage value on top/bottom padding or margins is relative to the width of the containing block.
For instance:
.responsive-container {
width: 60%;
padding-top: 60%; /* 1:1 Height is the same as the width */
padding-top: 100%; /* width:height = 60:100 or 3:5 */
padding-top: 45%; /* = 60% * 3/4 , width:height = 4:3 */
padding-top: 33.75%; /* = 60% * 9/16, width:height = 16:9 */
}
Here is the Online Demo. Comment out the lines from the bottom and resize the panel to see the effect.
Also, we could apply the padding
property to a dummy child or :before
/:after
pseudo-element to achieve the same result. But note that in this case, the percentage value on padding
is relative to the width of the .responsive-container
itself.
<div class="responsive-container">
<div class="dummy"></div>
</div>
.responsive-container { width: 60%; }
.responsive-container .dummy {
padding-top: 100%; /* 1:1 square */
padding-top: 75%; /* w:h = 4:3 */
padding-top: 56.25%; /* w:h = 16:9 */
}
Demo #1.
Demo #2 (Using :after
pseudo-element)
Adding the content
Using padding-top
property causes a huge space at the top or bottom of the content, inside the container.
In order to fix that, we have wrap the content by a wrapper element, remove that element from document normal flow by using absolute positioning, and finally expand the wrapper (bu using top
, right
, bottom
and left
properties) to fill the entire space of its parent, the container.
Here we go:
.responsive-container {
width: 60%;
position: relative;
}
.responsive-container .wrapper {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}
Here is the Online Demo.
Getting all together
<div class="responsive-container">
<div class="dummy"></div>
<div class="img-container">
<img src="http://placehold.it/150x150" alt="">
</div>
</div>
.img-container {
text-align:center; /* Align center inline elements */
font: 0/0 a; /* Hide the characters like spaces */
}
.img-container:before {
content: ' ';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.img-container img {
vertical-align: middle;
display: inline-block;
}
Here is the WORKING DEMO.
Obviously, you could avoid using ::before
pseudo-element for browser compatibility, and create an element as the first child of the .img-container
:
<div class="img-container">
<div class="centerer"></div>
<img src="http://placehold.it/150x150" alt="">
</div>
.img-container .centerer {
display: inline-block;
vertical-align: middle;
height: 100%;
}
UPDATED DEMO.
Using max-*
properties
In order to keep the image inside of the box in lower width, you could set max-height
and max-width
property on the image:
.img-container img {
vertical-align: middle;
display: inline-block;
max-height: 100%; /* <-- Set maximum height to 100% of its parent */
max-width: 100%; /* <-- Set maximum width to 100% of its parent */
}
Here is the UPDATED DEMO.
Center image vertically in div using only css
I would recommend giving the .overlay
<div>
a flexbox layout instead of a table. Then you can center the image by simply applying three rules to the parent:
.overlay {
display: flex;
align-items: center;
justify-content: center;
}
Note that you'll no longer need display: table-cell
or margin: auto
on .swipe
.
This can be seen in the following example:
.overlay { height: 50%; background: red; position: fixed; top: 0; left: 0; height: 50%; width: 100%; display: flex; align-items: center; justify-content: center;}
.swipe { height: 80px;}
<div style="height:300px"> <div class="overlay"> <img class="swipe" src="https://d30y9cdsu7xlg0.cloudfront.net/png/255751-200.png" /> </div></div>
How to make an image center (vertically & horizontally) inside a bigger div
Personally, I'd place it as the background image within the div, the CSS for that being:
#demo {
background: url(bg_apple_little.gif) no-repeat center center;
height: 200px;
width: 200px;
}
(Assumes a div with id="demo"
as you are already specifying height
and width
adding a background
shouldn't be an issue)
Let the browser take the strain.
How to vertically center an image inside of a div element in HTML using CSS?
if your image is purely decorative, then it might be a more semantic solution to use it as a background-image. You can then specify the position of the background
background-position: center center;
If it is not decorative and constitutes valuable information then the img tag is justified. What you need to do in such case is style the containing div with the following properties:
div{
display: table-cell; vertical-align: middle
}
Read more about this technique here. Reported to not work on IE6/7 (works on IE8).
How to center image vertically in div
I use this css snippet:
.selector {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
Applied to your sample: https://jsfiddle.net/nhdh8ycr/4/
Css - vertical centering of an image inside a div
Use flex styles.
.user-image {
display: flex;
justify-content: center;
align-items: center;
}
Centering an image vertically in a div with a dynamic height
You can give the parents divs relative positioning and the images absolute positioning:
img { width:25px; position:absolute; margin:auto; top:0; bottom:0;}.container-fluid > div { text-align:center; height: calc(100vh/5); position:relative;}.container-fluid > div:nth-child(odd) { background:yellow;}
<div class="container-fluid"> <div> <img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg"> </div> <div> <img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg"> </div> <div> <img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg"> </div> <div> <img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg"> </div> <div> <img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg"> </div></div>
Related Topics
Make a Div Fill an Entire Table Cell
How to Fill Html5 Input[Type=Range] on the Left Side of the Thumb With CSS Only
How to Make an Svg Scale With Its Parent Container
Vertical Align Center in Bootstrap 4
Change Navbar Color in Twitter Bootstrap
How to Override Inline Styles With External Css
Css 100% Height With Padding/Margin
How to Identify Unused CSS Definitions from Multiple CSS Files in a Project
Truncating Long Strings With Css: Feasible Yet
Left Aligned Last Row in Centered Grid of Elements
Css Hover Drop Down Menu Disappears When Trying to Select Menu Option
How to Set the Size of a Column in a Bootstrap Responsive Table
2 Column Div Layout: Right Column With Fixed Width, Left Fluid
How to Center an Absolutely Positioned Element in a Div
How to Really Isolate Stylesheets in the Google Chrome Extension
Svg Data Image Not Working as a Background-Image in a Pseudo Element
What's the Difference Between Align-Content and Align-Items
How to Style Child Components from Parent Component'S CSS File