Why is the image not rendered exactly in the middle of the enclosing DIV in this example?
div {
border: 1px solid gray;
line-height: 100px;
}
img {
height: 96px;
vertical-align: middle;
}
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/02/Russula_emetica_117475.jpg"> Foo
</div>
If we run this example, we see that the image is closer to the bottom border than the top border.
Why does this happen?
What is the right way to vertically align an image in a DIV so that it is exactly in the middle of the DIV vertically?
If we check the documentation we will read this:
middle
Aligns the middle of the element with the baseline plus half the x-height of the parent.
So we need to identify these values in order to understand the alignement. If we refer to the above figure we can clearly see the baseline and we can also see the line-height (defined by 100px in our case). You can aslo notice that the middle is not the middle of the div but the middle of the text defined by the different values (font-family, font-size, etc).
To use easy words: your reference of alignment is no the div but the text inside the div.
To make it easier let keep the line-height with the default value and define a font-size instead (the line-height will be then equal to the font-size):
div {
border: 1px solid gray;
font-size:50px;
}
img {
height: 46px;
vertical-align: middle;
}
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/02/Russula_emetica_117475.jpg"> Foo
</div>
with a different font-family
<div style="font-family:arial">
<img src="https://upload.wikimedia.org/wikipedia/commons/0/02/Russula_emetica_117475.jpg"> Foo
</div>
You can cleary see that the middle is far from the middle of the div and if we change the font-family the alignment will also change.
In order to align content inside a div that contain text better rely on flexbox for example:
div {
border: 1px solid gray;
font-size:50px;
display:flex;
align-items:center;
}
img {
height: 46px;
}
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/02/Russula_emetica_117475.jpg"> Foo
</div>
that the element would be where it is required, he needs to specify it
img {
height: 96px;
width: 120px;
margin-left: calc(50% - 60px);
vertical-align: middle;
}
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/02/Russula_emetica_117475.jpg"> Foo
</div>
You could just add equal padding on the top and bottom of the div. This helps you to align the image in the center. There are also many other ways to center align items.
Please go through the article https://vanseodesign.com/css/vertical-centering/
div {
border: 1px solid gray;
padding: 20px 0;
}
img {
height: 96px;
}
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/02/Russula_emetica_117475.jpg"> Foo
</div>
What is the right way to vertically align an image in a DIV ?
you can do it with vertical-align: middle;
div {
border: 1px solid gray;
}
img {
height: 96px;
vertical-align: middle;
}
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/02/Russula_emetica_117475.jpg" />
<span class="caption">Foo</span>
</div>
or you can use flexbox
div {
border: 1px solid gray;
display:flex;
align-items:center;
}
img {
height: 96px;
}
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/02/Russula_emetica_117475.jpg" />
<span class="caption">Foo</span>
</div>
I've seen plenty of solutions if the child div has a fixed width, but not if it is fluid.
The parent div should have a fixed height (150px) and fluid width (80%).
The child div should have a fluid height (expands with content) and fluid width (always 100%).
I want to get the child div to vertically align within the parent div. All content within the child div should also be horizontally centered.
Here's what I have right now:
http://jsfiddle.net/6986r/
<div class="s1">
<div class="centereddiv">This green div should be vertically centered.</div>
</div>
-
body, html {
height: 100%;
margin: 0;
}
.s1 {
width:100%;
height: 150px;
display: block;
background-color: red;
float: left;
}
.centereddiv {
color: black;
text-align: center;
background-color: green;
}
If you do not mind older browser, you may use the display:flex property (aside the table property already proposed by #SW4)
Notice that display:table can be used as a fall back for older browser
DEMO
Basic update to your CSS:
.parent {
display:flex;
}
.childcentereddiv {
margin:auto;
}
Likely the most flexible implementation would be to leverage display:table, however you will also need to adapt your HTML slightly and add an additional parent:
Demo Fiddle
<div class="table">
<div class="cell">
<div class="childcentereddiv">This green div should be vertically centered.</div>
</div>
</div>
CSS
body, html {
height: 100%;
margin: 0;
width:100%;
padding:0;
}
.table {
height: 150px;
background-color: red;
display:table;
width:80%;
}
.cell {
display:table-cell;
vertical-align:middle;
}
.childcentereddiv {
color: black;
text-align: center;
background-color: green;
}
I'm trying to vertically center a span or div element within another div element. However when I put vertical-align: middle, nothing happens. I've tried changing the display properties of both elements, and nothing seems to work.
This is what I'm currently doing in my webpage:
.main {
height: 72px;
vertical-align: middle;
border: 1px solid black;
padding: 2px;
}
.inner {
vertical-align: middle;
border: 1px solid red;
}
.second {
border: 1px solid blue;
}
<div class="main">
<div class="inner">
This box should be centered in the larger box
<div class="second">Another box in here</div>
</div>
</div>
Here is a jsfiddle of the implementation showing that it doesn't work: http://jsfiddle.net/gZXWC/
Using CSS3:
<div class="outer">
<div class="inner"/>
</div>
Css:
.outer {
display : flex;
align-items : center;
}
use "justify-content: center;" to align elements horizontally
Note: This might not work in old IE's
This seems to be the best way - some time has passed since my original post and this is what should be done now:
.main {
display: table;
/* optional css start */
height: 90px;
width: 90px;
/* optional css end */
}
.inner {
border: 1px solid #000000;
display: table-cell;
vertical-align: middle;
}
<div class="main">
<div class="inner"> This </div>
</div>
Try this, works for me very well:
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
Setting the line-height to the same height as it's containing div will align content in the middle vertically;
DEMO http://jsfiddle.net/kevinPHPkevin/gZXWC/7/
.inner {
line-height:72px;
border: 1px solid #000000;
}
In case you cannot rely on flexbox... Place .child into .parent's center. Works when pixel sizes are unknown (in other words, always) and no problems with IE9+ too.
.parent { position: relative; }
.child {
position: absolute;
top : 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform : translate(-50%, -50%);
}
<div class="parent" style="background:lightyellow; padding:6em">
<div class="child" style="background:gold; padding:1em">—</div>
</div>
You should put vertical-align: middle on the inner element, not the outer element. Set the line-height property on the outer element to match the height of the outer element. Then set display: inline-block and line-height: normal on the inner element. By doing this, the text on the inner element will wrap with a normal line-height. Works in Chrome, Firefox, Safari, and IE 8+
.main {
height: 72px;
line-height:72px;
border: 1px solid black;
}
.inner {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
<div class="main">
<div class="inner">Vertically centered text</div>
</div>
Fiddle
I used this to align everything in the center of the wrapper div in case it helps anyone - I found it simplest:
div.wrapper {
/* --- This works --- */
display: flex;
/* Align Vertically */
align-items: center;
/* Align Horizontally */
justify-content: center;
/* --- ---------- ----- */
width: 100%;
height:100px;
background-color: blue;
}
div.inner {
width: 50px;
height: 50px;
background-color: orange;
}
<div class="wrapper">
<div class="inner">
</div>
</div>
This is a modern approach and it utilizes the CSS Flexbox functionality.
You can now vertically align the content within your parent container by just adding these styles to the .main container
.main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center; // To center align it horizontally as well
}
You can also use CSS Grids ( a two-dimensional grid-based layout system).
.main {
display: grid;
justify-content: center;
align-content: center;
}
Below is a Shorthand approach but browser support is still low - https://caniuse.com/?search=place-items.
.main {
display: grid; // flex - works for both
place-items: center;
}
And you are good to go!
HTML
<div id="myparent">
<div id="mychild">Test Content here</div>
</div>
CSS
#myparent {
display: table;
}
#mychild {
display: table-cell;
vertical-align: middle;
}
We set the parent div to display as a table and the child div to display as a table-cell. We can then use vertical-align on the child div and set its value to middle. Anything inside this child div will be vertically centered.
Here you have an example of two ways of doing a vertical alignment. I use them and they work pretty well. One is using absolute positioning and the other using flexbox.
Vertical Align Example
Using flexbox, you can align an element by itself inside another element with display: flex; using align-self. If you need to align it also horizontally, you can use align-items and justify-content in the container.
If you don't want to use flexbox, you can use the position property. If you make the container relative and the content absolute, the content will be able to move freely inside the container. So if you use top: 0; and left: 0; in the content, it will be positioned at the top left corner of the container.
Then, to align it, you just need to change the top and left references to 50%. This will position the content at the container center from the top left corner of the content.
So you need to correct this translating the content half its size to the left and top.
here is a great article of how to vetical align..
I like the float way.
http://www.vanseodesign.com/css/vertical-centering/
The HTML:
<div id="main">
<div id="floater"></div>
<div id="inner">Content here</div>
</div>
And the corresponding style:
#main {
height: 250px;
}
#floater {
float: left;
height: 50%;
width: 100%;
margin-bottom: -50px;
}
#inner {
clear: both;
height: 100px;
}
It's simple. Just add display:table-cell in your main class.
.main {
height: 72px;
vertical-align: middle;
display:table-cell;
border: 1px solid #000000;
}
Check out this jsfiddle!
Here is the latest simplest solution - no need to change anything, just add three lines of CSS rules to your container of the div where you wish to center at. I love Flex Box #LoveFlexBox
.main {
/* I changed height to 200px to make it easy to see the alignment. */
height: 200px;
vertical-align: middle;
border: 1px solid #000000;
padding: 2px;
/* Just add the following three rules to the container of which you want to center at. */
display: flex;
flex-direction: column;
justify-content: center;
/* This is true vertical center, no math needed. */
}
.inner {
border: 1px solid #000000;
}
.second {
border: 1px solid #000000;
}
<div class="main">
<div class="inner">This box should be centered in the larger box
<div class="second">Another box in here</div>
</div>
<div class="inner">This box should be centered in the larger box
<div class="second">Another box in here</div>
</div>
</div>
Bonus
the justify-content value can be set to the following few options:
flex-start, which will align the child div to where the flex flow starts in its parent container. In this case, it will stay on top.
center, which will align the child div to the center of its parent container. This is really neat, because you don't need to add an additional div to wrap around all children to put the wrapper in a parent container to center the children. Because of that, this is the true vertical center (in the column flex-direction. similarly, if you change the flow-direction to row, it will become horizontally centered.
flex-end, which will align the child div to where the flex flow ends in its parent container. In this case, it will move to bottom.
space-between, which will spread all children from the beginning of the flow to the end of the flow. If the demo, I added another child div, to show they are spread out.
space-around, similar to space-between, but with half of the space in the beginning and end of the flow.
Since vertical-align works as expected on a td, you could put a single celled table in the div to align its content.
<div>
<table style="width: 100%; height: 100%;"><tr><td style="vertical-align: middle; text-align: center">
Aligned content here...
</td></tr></table>
</div>
Clunky, but works as far as I can tell. It might not have the drawbacks of the other workarounds.
Just put the content inside a table with height 100%, and set the height for the main div
<div style="height:80px;border: 1px solid #000000;">
<table style="height:100%">
<tr><td style="vertical-align: middle;">
This paragraph should be centered in the larger box
</td></tr>
</table>
</div>
To vertically center a span or div element within another div, add position relative to parent div and position absolute to the child div.Now the child div can be positioned anywhere inside the div.Example below centers both horizontally and vertically.
<div class="parent">
<div class="child">Vertically and horizontally centered child div</div>
</div>
css:
.parent{
position: relative;
}
.child{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
set below CSS
/*Parent*/
display: table;
/*immediate child*/
display: table-cell;
vertical-align: middle;
~Rahul Daksh
THIS IS THE ANSWER:
vertical-align aligns elements relative to the dimensions of the line the element appears in.
reference: https://christopheraue.net/design/why-vertical-align-is-not-working
The question was "WHY?".
The answer: vertical-align only works in certain conditions
in the "display: table-cell;"
This question already has answers here:
How to vertically align an image inside a div
(37 answers)
Closed 9 years ago.
I'm trying to vertical align my ing element within a div. Only problem is the img element doesn't have a fixed height. I tried vertical-align in combination with table, table-cell and inline-block and inline. None of this seems to work. Does anyone have any idea how I can achieve this? I made a JSFiddle that recreates my problem.
JsFiddle: http://jsfiddle.net/6gMcK/1/
HTML:
<div id="image-container">
<img src="http://www.image2012.com/images/2013/03/landscapes-landscape-free.jpg">
</div>
CSS:
#image-container {
padding:5px;
height: 135px;
border: 1px solid black;
display: table;
float:left;
}
#image-container img{
display: table-cell;
max-height:125px;
vertical-align: middle;
}
Change some properties as like this
#image-container {
padding: 5px;
height: 135px;
border: 1px solid black;
display: table-cell;
vertical-align: middle;
}
#image-container img{
max-height: 125px;
display: block;
}
Live Demo
A solution I often use is to have the image be the background of the image container. This way I can set the width and height to whatever it needs to be and for any image and size of the container, with a little absolute positioning and the full image is always displayed.
#image-container {
position:absolute;
left:30%;
right:30%;
min-width:135px;
height: 135px;
border: 1px solid black;
background-image:url('image.png');
background-size:contain;
background-repeat:no-repeat;
background-position:center;
}
Of course you can always play around with the values for the width depending on what your needs are. I always found this to be a simple solution for displaying images.
If you just have one image in the container , and the container has a fixed height, then you could simply apply line-height = container_height_px to the container
Try this demo
I have logo and logo name as text to display. Please see the image below to understand my problem clearly.
Most tips and answers found are using absolute positioning but this doesnt match my requirements.
div class boxes:
Yellow: container , Green: for logo, blue: logo text or logo name as text
All the correct display to achieve are found on the right side of the sample div layout image above.
Problem Summary:
Everything will be working fine if both div(logo and logo text) are floated left BUT the only problem is its floated on top. How will I display the "logo text" at the bottom of the "container"?
Is this possible without positioning the "logo text" to absolute?
For now the div container, logo, and logo text classes are floated left.
I think display: inline-block with vertical-align: bottom; gets you where you want to be;
<div class=logo>logo</div>
<div class=name>name</div>
.logo {
display: inline-block;
vertical-align: bottom;
width: 200px;
height: 200px;
background-color: red;
}
.name {
display: inline-block;
vertical-align: bttom;
width: 300px;
height: 50px;
background-color: blue;
}
Here it is in action: http://jsfiddle.net/hajpoj/CDBHT/
Resize the result window to see the effect.
DEMO
Making your child div's inline-block is the solution. Also you will need to give a max-width and min-height attributes to your container so that it re-sizes to fit your contents. See this solution-
HTML-
<div id="con">
<div id="lo"></div>
<div id="tex"></div>
</div>
CSS-
#con
{
max-width:310px;
min-height:140px;
background:yellow;
border: 1px solid aqua;
}
#lo
{
width:140px;
height:140px;
background:green;
display:inline-block;
vertical-align:bottom;
}
#tex
{
width:160px;
height:60px;
background:orange;
display:inline-block;
vertical-align: bottom;
}