So here are two identical divs:
HTML
<div id="left"></div>
<div id="right"></div>
CSS
#left, #right
{
width: 100px;
height: 40px;
border: 1px solid gray;
display: inline-block;
}
These render just fine, as two identical boxes side-by-side (fiddle: http://jsfiddle.net/URy59/).
But with text in one div, and none in the other, they're misaligned! (fiddle: http://jsfiddle.net/URy59/1/)
This...
<div id="left"></div>
<div id="right">Right</div>
...results in:
This behaviour is reproducible using <span> as well.
What causes this, and why? What's a good solution to this?
The short answer: set the vertical-align property to top.
The longer answer: An inline element's default vertical alignment is baseline. When your divs have no content, they line up fine. However when you added the text, the browser then will move the div downward so that the text sits on the baseline:
By changing the alignment to top, you align the divs the way you need.
jsFiddle example
You need to vertically align your elements:
#left, #right {
...
vertical-align: top;
}
JSFiddle demo.
I have lines of text varying from a couple words to a full sentence. I need that text centered horizontally, and most importantly, vertically.
CSS really needlessly fails at vertical centering (c'mon guys) but I found a solution that works in IE10 and Chrome, and it actually works in firefox too, but firefox pushes the div down below the container.
The html / css looks like:
<div style="position:absolute;">
<div style="position:relative;width:343.17em;height: 237.38em>
<svg for cloud />
</div>
<div style="position:relative;top:-210em;left:30em;width:240em;height: 180em;display: table-cell;vertical-align: middle;text-align: center">
<p style="text-align: center;display:inline-block">v-center me</p>
</div>
</div>
on Chrome and IE it looks like:
on FF it looks like:
EDIT:
here is a the fiddle showing the exact problem. view on chrome then FF.
http://jsfiddle.net/AwokeKnowing/PJJce/
I was able to get it to work in all 3 browsers by making the following changes to the CSS:
#text-wrap
{
position:relative;
top:-100px;
left:30px;
border:1px solid blue;
width:200px;
height:80px;
display:table; /* Changed to table instead of table-cell */
/* Removed: vertical-align: middle; */
text-align:center;
}
#text
{
text-align:center;
display:table-cell; /* Changed to table-cell instead of inline-block */
vertical-align: middle; /* Added vertical align */
}
Also, you're missing the closing tag on <div id="cloud">
How do I align a <div> which contains an image (or flash) vertically with CSS. Height and width are dynamic.
This is a pure CSS2 solution for horizontally and vertically centering without known sizes of either container nor child. No hacks are involved. I discovered it for this answer and I also demonstrated it in this answer.
The solution is based on vertical-align: middle in conjunction with line-height: 0, which parent has a fixed line-height.
The HTML:
<span id="center">
<span id="wrap">
<img src="http://lorempixum.com/300/250/abstract" alt="" />
</span>
</span>
And the CSS:
html,
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
#center {
position: relative;
display: block;
top: 50%;
margin-top: -1000px;
height: 2000px;
text-align: center;
line-height: 2000px;
}
#wrap {
line-height: 0;
}
#wrap img {
vertical-align: middle;
}
Tested on Win7 in IE8, IE9, Opera 11.51, Safari 5.0.5, FF 6.0, Chrome 13.0.
The only caveat is IE7, for which the two innermost elements have to declared at one line, as demonstrated in this fiddle:
<span id="center">
<span id="wrap"><img src="http://lorempixum.com/300/250/abstract" alt="" /></span>
</span>
Note that the span's are also required for IE7. In every other browser, the span's may be div's.
You can do this by using inline-blocks, one with height: 100% (and same heights for HTML and BODY) and vertical-align: middle.
Example 1: http://jsfiddle.net/kizu/TQX9b/ (a lot of content, so it's full width)
Example 2: http://jsfiddle.net/kizu/TQX9b/2/ (an image with any size)
In this example I use spans, so It would work in IE without hacks, if you'd like to use divs, don't forget to add in Conditional Comments for IE .helper, .content { display: inline; zoom: 1; }, so inline-blocks would work for block elements.
In addition to the other answers here, the CSS3 flexible box model will, amongst other things, allow you to achieve this.
You only need a single container element. Everything inside it will be laid out according to the flexible box model rules.
<div class="container">
<img src="/logo.png"/>
</div>
The CSS is pretty simple, actually:
.container {
display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;
}
I've omitted vendor-prefixed rules for brevity.
Here's a demo in which the img is always in the centre of the page: http://jsfiddle.net/zn8bm/
Note that Flexbox is a fledgling specification, and is only currently implemented in Safari, Chrome and Firefox 4+.
I would recommend this solution by Bruno: http://www.brunildo.org/test/img_center.html
However, I ran into a problem w/ his solution w/r/t webkit. It appears that webkit was rendering a small space at the top of the div if the empty span was allowed to be there. So, for my solution I only add the empty span if I detect the browser to be IE (If someone figures out how to get rid of the space, let me know!) So, my solution ends up being:
HTML:
<div class="outerdiv">
<img src="..." />
</div>
CSS:
.outerdiv {
display: table-cell;
width: 200px;
height: 150px;
text-align: center;
vertical-align: middle;
}
.ie_vertical_align * {
vertical-align: middle;
}
.ie_vertical_align span {
display: inline-block;
height: 150px;
width: 0;
}
And if I detect the browser to be IE I add an empty span element before the img tag and a css style so it looks like:
<div class="outerdiv ie_vertical_align">
<span></span>
<img src="..." />
</div>
Here's a JSFiddle with this code.
Dušan Janovský, Czech web developer, has published a cross-browser solution for this some time ago. Read http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
If you don't care about IE7 and below, you don't have to use multiple nested divs. If you have a div that you want to align vertically, that div is within some container (even if the container is your <body>). Therefore, you can specify display: table-cell and vertical-align: middle on the container, and then your div will be vertically centered.
However, if you do care about IE7 and below, you will need an additional container to make it work (yes, via a hack).
Take a look at this fiddle. It displays correctly in IE6-9 and other major browsers. #container2 is present solely for IE7 and below, so if you don't care about them, you can remove it as well as the IE-specific conditional styles.
Set the image as background of the div and align it center
try the 50% padding trick:
<html>
<body style="width:50%; height: 50%;">
<div style="display:block; display:inline-block; layout-grid:line;
text-align:center; vertical-align:bottom;
padding: 50% 0 50% 0">test</div>
</body>
</html>
This is possible if you know the height of the image or flash object to be centered. You don't need to know the container's height/width, but you do need to know the contained height/width.
It's possible using float, clear and negative margins. Example: www.laurenackley.com homepage.
html
<div id='container'><!-- container can be BODY -->
<div id='vertical-center'> </div>
<div id='contained-with-known-height'>
<p>stuff</p>
</div>
</div>
css
#vertical-center{
height:50%;
width:1px;
float:left;
margin-bottom:-50px;/** 1/2 of inner div's known height **/
}
#contained-with-known-height{
height:100px;
clear:left;
margin:0 auto;/** horizontal center **/
width:700px;
text-align:left;
}
#container{/** or body **/
text-align:center;
/** width and height unknown **/
}
If you don't know the inner elements width/height. You are out of luck with <div>. BUT -- table cells (<td>) do support vertical-align:middle; If you can't get it done with the div stuff above, go with a table inside the container, and put the div you are centering inside a td with vertical-align middle.
Does anyone know why I don't get a top-margin in the first div based on the CSS below? This renders the same in Chrome, Safari and Firefox 4 running on Mac OSX Lion (rendered the same in Snow Leopard). I would expect the first item to display with a 5px margin all the way around the inner div (except for the bottom obviously) and not just on the right and left. Why would the margin not also be applied to the top? Even if I specify margin-top:5px in the CSS it still doesn't render as I would expect.
<!DOCTYPE html>
<html>
<head>
<style>
.outer{
background-color:red;
width:100px;
height:100px;
margin-bottom:20px;
}
.inner{
background-color:white;
margin:5px;
}
.shim{
height:1px;
}
.outer2{
background-color:red;
width:100px;
height:100px;
margin-bottom:20px;
padding:5px;
}
.inner2{
background-color:white;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
Margin
</div>
</div>
<div class="outer">
<div class="shim"></div>
<div class="inner">
Margin+Shim
</div>
</div>
<div class="outer2">
<div class="inner2">
Padding
</div>
</div>
</body>
</html>
You're running into a common problem called "collapsing margins." Basically, whenever vertical margins touch (even when one element is inside another element), the margins collapse.
In this case your margin property on the inner div is collapsing into the margin-bottom: 20px; property on your outer div. To fix this, add a little padding or a border around the containing element.
Just tried this using your code and it works:
http://jsfiddle.net/hWPyD/2/
More info on collapsing margins:
http://www.w3.org/TR/CSS2/box.html#collapsing-margins
Its because there is a default margin and padding on html tags. Use a reset like this one to remove all of the browser defaults. (I highly recommend doing this)
I know this is a common problem but I can't seem to find a solution that works. I have a setup like this:
<div id="wrapper">
<div class="content-area-top"></div>
<div class="content-area">
<h1>Title</h1>
some other text
</div>
</div>
.content-area-top {
height: 12px;
width: 581px;
background-image: url(images/content-top.jpg);
}
.content-area {
margin-left: 10px;
margin-right: 10px;
background-color: #e9ecfd;
}
The problem is that there is a gap between .content-area-top and .content-area. the .content-area-top div is sized to contain a background image that gives me the rounded corners that I want.
I know that issue comes form the fact that the H1 tag has a (browser default) top margin set (.67em), but I'm unwilling to set its margin to 0, and I don't see why its margin applies 'outside' its containing div.
I'm using chrome on Mac, but firefox has the same issue. This is probably some well-known fix, but I couldn't find a a solution specific to my case.
See here for a related question:
Why would margin not be contained by parent element?
in which a great article on margin collapse is presented:
http://reference.sitepoint.com/css/collapsingmargins
The article does have some pointers.
The answer is that the margin on H1 collapses with its parent(.content-area) margin (0 in this case), and so the parent div takes on the H1 margin. To prevent that, the parent div (.content-area) needs to have a padding set or a border or something set to prevent the collapse (which, in my case, brings my two divs together correctly)
Margins aren't supposed to collapse if there is a border between them. So you can add a hidden border to prevent margin collapse.
The following worked for me in my tested versions of FF, Chrome & IE.
<!-- Set the border-color to your background color.
If default white background colour use #FFFFFF -->
<div style="background-color: #8DB3E2; border-color: #8DB3E2; border-style:solid; border-width:1px; ">
<p >Paragraph 1 in blue box</p>
<p >Paragraph 2 in blue box</p>
</div>
<!-- No space here thanks -->
<div style="background-color: #9BBB59; border-color: #9BBB59; border-style:solid; border-width:1px; ">
<p >Paragraph 1 in green box</p>
<p >Paragraph 2 in green box</p>
</div>
Try giving a valid doctype. It worked for me :)
Refer this : A list apart has said it beautifully!
Yogesh
Try this approach:
#content-area-top {
width:581px;
height:12px;
float:left;
background-image:url("images/content-top.jpg");
}
#content-area {
width:561px; /* substract margin left & right values from it's width */
float:left;
display:inline; /* prevent ie6-double-margin bug */
margin:0 10px;
background-color:#e9ecfd;
}
#wrapper {
width:581px;
float:left;
}