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 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="Sample Image">
</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="Sample Image">
</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.
Bootstrap Vertical Align Image
The easiest solution is to use Flexbox (see spec. for more details on it's usage).
For this particular case, assign a custom class to each of your content containing div (currently it only has .col-md-11
), for example class "content" and add this code to your stylesheet
.content {
display: flex;
align-items: center;
flex-wrap: wrap;
}
Small code explanation: align-items
aligns the items vertically, since we left the default flex direction which is row and flex-wrap
will allow our parent container to wrap children to next line (default is nowrap
).
Keep in mind, that I haven't included vendor prefixes for the sake of this answer, however I would strongly recommend you to do so, using a tool such as Autoprefixer.
Vertically align text next to an image?
Actually, in this case it's quite simple: apply the vertical align to the image. Since it's all in one line, it's really the image you want aligned, not the text.
<!-- moved "vertical-align:middle" style from span to img -->
<div>
<img style="vertical-align:middle" src="https://via.placeholder.com/60x60" alt="A grey image showing text 60 x 60">
<span style="">Works.</span>
</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 next to paragraph
Use display: inline-block;
for vertical-align
.
CSS
img {
display: inline-block;
margin-right: 10px;
vertical-align: middle;
}
.content-holder {
display: inline-block;
vertical-align: middle;
}
HTML
<div class="church-admin-calendar-widget-item">
<img width="75" height="60" src="http://dummyimage.com/75" />
<div class="content-holder">
<p class="ca_event_detail" >
Blah Blah<br/>
Blah Blah<br/>
Blah Blah<br/>
Blah Blah<br/>
Blah Blah<br/>
Blah Blah<br/>
Blah Blah<br/>
Blah Blah<br/>
</p>
</div>
</div>
DEMO
Vertical align text along side image
wrap your image and text in div .container
, and set the rules for flex
and align-item center
.
.container {
display: flex;
align-items: center;
}
.image {
width: 58%;
padding-top: 60%;
margin-right: 2%;
position: relative;
float: left;
position: relative;
background-image: url("https://cdn.shopify.com/s/files/1/0292/7217/8793/files/photo-1556760647-90d218f7ca5b.jpg?v=1589200183");
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.textcontainer {
width: 40%;
position: relative;
float: left;
}
<div class="container">
<div class="image">
</div>
<div class="textcontainer">
Some text which i would like centred
</div>
</div>
Vertical-align image
Try setting the line-height
attribute of the p
element to the height of the image, eg:
div p {
line-height: 18px;
}
Edit: Just realised I misread the question and missed the fact the p
would be multi-line. One option to try is removing the img
element altogether and setting it as the background-image
of the p
instead, with a background-position
of left, center
. Something like:
div p {
background: transparent url(path/to/img) no-repeat left center;
padding-left:30px; /* Set based on width of image */
}
Related Topics
Webpack "Ots Parsing Error" Loading Fonts
Css3 - 3D Flip Animation - Ie10 Transform-Origin: Preserve-3D Workaround
Display:Inline Resets Height and Width
CSS How to Make an Element Fade in and Then Fade Out
Selenium Webdriver Get Text from CSS Property "Content" on a ::Before Pseudo Element
Hide Up & Down Arrow Buttons (Spinner) in Input Number - Firefox 29
Sass CSS: Target Parent Class from Child
Input Height Differences in Firefox and Chrome
How to Preserve Line Breaks in <Code> Block
CSS for Grabbing Cursors (Drag & Drop)
Twitter's Bootstrap 3 Grid, Changing Breakpoint and Removing Padding
The Use of /Deep/ and >>> in Angular 2
Using Twitter Bootstrap 2.0 - How to Make Equal Column Heights
What's the Difference Between CSS3's :Root Pseudo Class and HTML
What's a Querystring Doing in This Stylesheet's Href
Twitter Bootstrap: Div in Container with 100% Height
Is It Bad Practice to Comment Out Single Lines of CSS with //