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.
How to vertically align with responsive divs (no heigh/width)?
You can use flexbox for this - I have commented css below:
* { box-sizing: border-box;}
.container { display: flex; flex-direction: row; /* align children in rows */ flex-wrap: wrap; /* allow wrapping of children for multiple rows */ width: 50%; /* change to width you want */ margin: 0 auto;
border-left: 5px solid black; border-bottom: 5px solid black;}
.container>div { border-right: 5px solid black; border-top: 5px solid black; padding:20px; display:flex; /* make children flex too for centering */ align-items:center; /* vertical center */ justify-content:center; /* horizontal center */
}
.left-col { width: 30%;}
.right-col { width: 70%;}
<div class="container">
<div class="left-col"> top left content over multiple lines </div>
<div class="right-col"> top right </div>
<div class="left-col"> bottom left content over multiple lines </div>
<div class="right-col"> bottom right </div>
</div>
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>
Vertically center responsive image in responsive div with CSS
I would give the thanksup
row an id - eg vertical
and then you can use the following styles to achieve vertical alignment:
#vertical {
display:table;
width:100%;
}
#vertical > .columns {
float:none;
display:table-cell;
vertical-align:middle
}
@media (max-width: 565px) {
#vertical > .columns {
display: block;
}
Updated fiddle
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>
horizontally & vertically centered Responsive image
I have attempted this in the past and the only non-JS solution I've come up with (which is frowned upon, by the way) is this:
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
display: table;
}
.container {
display: table-cell;
vertical-align: middle;
border: 1px solid #f00;
}
.container > div {
width: 100%;
height: 100%;
margin: 0 auto;
border: 1px solid #00f;
max-width: 550px;
max-height: 480px;
background: url("http://dummyimage.com/550x480/000/fff?text=H/V Centered and height/width variable") 50% 50% no-repeat;
background-size: contain;
}
<div class="container"><div></div></div>
http://jsfiddle.net/pYzBf/1/
Set the background color of the div to black to see the scaling without the image edges. I used those dimensions so you can test it by resizing the frame.
How to vertically align in the middle a clickable image (between a/a) inside a div in a responsive manner?
Use like this
<div class="accounts">
<a href="LinkA" target="_blank"><img src="Vendors/Images/GithubLogo.png" alt="Github"></a>
</div>
<div class="accounts">
<a href="LinkB" target="_blank"><img src="Vendors/Images/SOLogo.png" alt="Stack Overflow"></a>
</div>
Vertically align responsive width and height image
I found a solution with flex, I hope you find it useful:
#test { max-height: 400px; width: 50%; position: relative; display: flex; flex-direction: column; justify-content: center; overflow:hidden;}
#test .test-image { width: 100%;}
<div id="test"> <img src="http://lorempixel.com/800/800/sports/1" class="test-image"></div>
Vertically align image in div that uses padding-bottom to lock ratio
You could do the following using absolute
positioning:
JS Fiddle
(in example background of image made green to show its centered)
.container {
width:300px;
}
.image-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 100%;
background:yellow;
}
img {
width:100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0px);
}
And for older browsers:
JS Fiddle
img {
background: green;
width:100%;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
Vertically center image in responsive div
TRY:
to add to div in which image is contained parameter:
position: relative;
and to the image:
position: absolute;
top: 50%;
margin-top: -(half of image height)%;
that should work!
Related Topics
How to Prevent Autoplay in Iframe HTML Content
Add Onclick Event to Svg Element
Html Video Not Playing in Safari Browser
How to Download a Locally Stored File in Vuejs
How to Playback Mkv Video in Web Browser
How to Reuse a Navigation Bar on Multiple Pages
How to Set Space Between Contained Divs
How to Hide an HTML Table Row <Tr> So That It Takes Up No Space
How to Remove Specific Text With CSS
How to Make Div Have 100% Height of Parent, Independent of Children'S Size? Complex Layout
Css Absolute Position With X Scrolling
Fill Svg Path Element With a Background-Image
How to Show Google.Com in an Iframe
Fixed Page Header Overlaps In-Page Anchors
Css Pseudo-Classes With Inline Styles