This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
How to center DIV in DIV?
Sounds simple but couldn't figure it out:
How do I center a fixed width div on a page?
By default, it goes to the left.
halign is deprecated but I can find a could replacement.
[update]
width:800px;left-margin:auto;right-margin:auto:
works great.
Is there a way to do this without setting a fixed width?
Try this:
<style>
.centered {
margin-left:auto;
margin-right:auto;
}
</style>
<div class="centered">
Some text
</div>
<div style="margin:0 auto">content here</div>
You can center any div that doesn't span the entire page. Say your div is
.div {
width: 80%;
margin: 0 auto;
}
Then it will work fine. As Evan said "display: inline-block;" will make the div as wide as its contents which will also work great with "margin: 0 auto;".
A div, by default, is the entire width of the page. You can center the contents by setting the css of the div to:
.mydiv
{
text-align: center;
}
OR
You can center the div itself by doing this:
.mydiv
{
display: inline-block; /* make it be only as wide as its contents */
margin: auto; /* centering magic by making the margins equal and maximum */
}
div {
margin-left: auto;
margin-right: auto;
}
As long as you have an appropriate doctype declared, centering a div on a page should be as easy as:
#someDiv {
width: 624px;
margin-left: auto;
margin-right: auto;
}
If you're using IE and you don't have a doctype declared (you're running in quirks mode), this won't work. The fix is to add the appropriate doctype declaration to your page. You can find the appropriate declaration here:
W3C QA - Recommended list of Doctype declarations you can use in your Web document
There's generally two ways of doing (that I've seen). One with the margin attribute and another with positioning and left:50%
http://jsfiddle.net/NvaEE/
<br>
<div class="first"> I have a fixe dwidth</div>
<br>
<div class="second"> I have a fixe dwidth</div>
div{width:200px; background:#ddd;}
div.first{margin:0 auto;}
div.second{position:absolute;left:50%;margin-left:-100px}
margin:auto; should do the trick, I guess?
You wrap it in a container div that spans the width of the page and give that container div the
text-align: center;
css attribute.
There are other methods, such as managing the margins and widths. For most cases, you can get by with text-align.
Related
friends,
I decided to ask this because I've seen many answers on the internet, but no one seems to be a definitive answer.
In out HTML documents we have many elements one inside another. Eventually we'll want to add paddings and margins to these elements.
So, what if we want to have all content horizontally aligned to the center of the page? If the content has 1000px of width and the screen resolution will change from device to device, the most common solution is something like (will work on netscape based browsers):
body{
width: 100%;
}
#content{
width: 1000px;
margin: 0 auto;
}
But if we have lots of other elements inside the #content element, like a table made of DIV elements, we start to face some problems. The parent's height will not adjust to its children's height and padding and margin will not work properly (if we inspect the element we will see that the width and height is not behaving as expected) unless we add some new rules.
I use float: left but then the headache starts! When I add float: left only those elements will work fine, but the parents will not. If I add float: left to an element that already has margin: 0 auto set, it will no longer be aligned to the center of the page...
I've seen some solutions using text-align: center to the parent and display: inline-block; float: none; to the element we want to be aligned to the center. But it also has many problems (for example, we can't set the float rule)
How do you deal with this problem guys?
You need to use clear after you use float on elements in order to 'clear the floats' and make the height propagate up to its parents. You can use clear:left (or right) to just clear float:left elements but typically it's fine to just use clear:both.
In the below example there are two versions of clearfixes, one that uses a pseudo-element on the container and another that is just another element.
Demo
HTML
<div id="content">
<nav>
<ul>
<li>Home</li>
<li>Second</li>
<li>Third</li>
</ul>
</nav>
<div class="float-me">Test1</div>
<div class="float-me">Test2</div>
<div class="clear"></div>
</div>
CSS
#content {
width: 500px;
margin: 0 auto;
}
li {
float:left;
}
/* our pseudo-element clearfix */
ul:after {
display: block;
content: "";
clear: both;
}
.float-me {
float:left;
}
.clear {
clear:both;
}
I am implementing a carousel with images. The carousel is 960px wide, and contains 5 images in containers of width 960px/5 = 192px (and height 119px).
I want the images to be as large as possible inside their containers, without changing the aspect ratio of the images. I also want the images to be centered both horizontally and vertically within their container.
By hacking around for hours, and using the center tag, I have managed to construct what I describe above. Please see a fiddle here.
The problem is with the container of the second image (as shown by the black border). While the second image is centered horizontally, the container is shifted down a little.
I'm trying to implement an overlay on the images, and need the containers to all be at the same height. How can I have the containers all at the same height? Is there a better/cleaner approach that does not use the center tag?
You could add vertical-align:top; to your #carousel-images .image{} css
Or middle or bottom...
Uh? Why did I get downvoted on this?
http://jsfiddle.net/y2KV7/
I got it to work by doing the following:
HTML:
<div id="wrapper">
<div id="carousel-images">
<img src="http://eurosensus.org/img/initiatives-300/30kmh.png" />
<img src="http://eurosensus.org/img/initiatives-300/affordableEnergy.png"/>
<img src="http://eurosensus.org/img/initiatives-300/basicIncome.jpg"/>
<img src="http://eurosensus.org/img/initiatives-300/ecocide.jpg"/>
<img src="http://eurosensus.org/img/initiatives-300/educationTrust.jpg"/>
</div>
</div>
CSS:
#wrapper
{
width: 100%;
text-align: center;
background: blue;
}
#carousel-images
{
width: 960px;
white-space: nowrap;
font-size: 0;
margin: 0 auto;
}
#carousel-images img
{
display: inline;
max-width: 192px;
max-height: 119px;
border: 1px solid black;
vertical-align: middle;
}
Click here to view working jsFiddle demo
First, don't make the world come back to 10 years ago. do not use tag for formating. I would also suggest you to get some reading about different between div and span as well as display attribute. you could easily find information on http://www.w3schools.com.
if you want a center container. you could use css margin auto trick.
like margin:5px auto; would center the container horizontally.
People frown upon the center tag, but for me it always works just the way I want it. Nevertheless, center is deprecated so I'll make an effort.
Now I see many people suggest the cryptic CSS margin: 0 auto; but I can't even get it to work (see fiddle here). Other people will go modify position or display, but that always breaks something else.
How can I center a span using css so that it behaves exactly like the center tag?
<div class="container">
<span class='btn btn-primary'>Click me!</span>
</div>
Span is an inline element, and the margin: 0 auto for centering only works on non-inline elements that have a width that is less than 100%.
One option is to set an alignment on the container, though this probably isn't what you want for this situation:
div.container { text-align: center }
http://jsfiddle.net/MgcDU/1270/
The other option is to change the display property of the span:
/* needs some extra specificity here to avoid the display being overwritten */
span.btn.btn-primary {
display: table;
margin: 0 auto;
}
Using display: table eliminates the need to hard code a specific width. It will shrink or grow as appropriate for its content.
http://jsfiddle.net/MgcDU/1271/
You can set .container { text-align:center; } so that everything inside div.container will be centered.
In general, there are two ways centering things.
To center inline elements (such as text, spans and images) inside their parents, set text-align: center; on the parent.
To center a block level element (such as header, div or paragraph), it must first have a specified width (width: 50%; for example). Then set the left and right margins to auto. Your example of margin: 0 auto; says that the top and bottom margin should be 0 (this doesn't matter for centering) ad that the left and right margins should be auto - they should be equal to each other.
The <center> element is really just a block-level element with text-align:center;. If you sent border: solid red 1px; on it, you can see that it's 100% wide, and that everything inside it is centered. If you change text-align to left, then its children are no longer centered. Example: http://jsfiddle.net/KatieK/MgcDU/1275/. Perhaps you should just consider your <div class="container"> with text-align:center; } to be equivalent to <center>.
You make the span block level, give it a width so margin:auto works
see this fiddle
.center {
display:block;
margin:auto auto;
width:150px; //all rules upto here are important the rest are styling
border:1px solid black;
padding:5px;
text-align:center;
}
UPDATE: In order to NOT specify a width and have natural width of element on the span you will have to use textalign on parent
see this fiddle
.container{text-align:center}
.center {
border:1px solid black;
padding:5px;
}
<span> is an inline element. <div> is a block element. That's why it is not centering.
<div class="container" style='float:left; width:100%; text-align:center;'>
<span class='btn btn-primary'>Click me!</span>
</div>
You can center the content of span only when you convert it into block, using 'inline-block' style.
Your parent element needs to have a larger width in order to let a child element be positioned within it. After that the trick with margin: 0 auto; is getting the parent and child container position and display values to be compatible with each other.
.container {
border: 2px dashed;
width: 100%;}
.btn {
display: block;
margin: 0 auto;
width: 25%;
}
http://jsfiddle.net/rgY4D/2/
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.
For me, one of the most useful features of tables is that their width adjust to its content.
You can very easily do things like:
<table align=center style="border: 1px solid black">
<tr><td style="padding: 20px">
some text here
</table>
If the content of that box is wider, the box will be wider. Very intuitive and it works on ALL browsers, period.
You can achive something similar for normal block elements by using the float CSS property, i.e. their width adjust to its content. But the element will not be centered.
So, the question: How can you center a block element and make that element to adjust its width to its content in a cross-browser manner?
The modern way is to specify display:table and the workaround for IE is having a parent element and text-align:center on a inline/inline-block:
<div id="for-ie">
<div id="el">whatup son</div>
</div>
<style>
#el {
display:table;
margin:0 auto;
}
/* for IE, throw this in a CC */
#for-ie { text-align:center; }
#el {
zoom:1;
display:inline;
}
</style>
Demo
Here's a quick tutorial I wrote on this subject: http://work.arounds.org/centering-block-level-element-variable-width/
I'll lengthen it when I'm not sleepy.
Quoting CSS: The Definitive Guide by Eric Meyer
If both margins are set to auto, as shown in the code below, then they are set to equal lengths, thus centering the element within its parent:
p {width: 100px; margin-left: auto; margin-right: auto;}
Setting both margins to equal lengths is the correct way to center elements, as opposed to using text-align. (text-align applies only to the inline content of a block-level element, so setting an element to have a text-align of center shouldn't center it.)
In practice, only browsers released after February 1999 correctly handle auto margin centering, and not all of them get it completely right. Those that do not handle auto margins correctly behave in inconsistent ways, but the safest bet is to assume that outdated browsers will reset both margins to zero.
However,
One of the more pernicious bugs in IE/Win up through IE6 is that it actually does treat text-align: center as if it were the element, and centers elements as well as text. This does not happen in standards mode in IE6 and later, but it persists in IE5.x and earlier.
If your intend is to display just some text at the middle of the page, you can use something like this:
<div style="text-align:center;">
<div style="background:red;display:inline;">
Hello World!
</div>
</div>
The first block will align contents to the middle. The second will fill the height equal to its contents, since display:inline will force the <div/> block to behavior like a <span/>, ie. adjust its width to content, and not to the remaining space.
Note this is limited to single line text only (like "some text here").
Use this CSS
#content {
position: absolute;
width: 150px;
margin-left: -75px;
left: 50%;
border: 1px solid #000;
text-align: center;
padding: 20px;
}
and this html
<div id="content">
some text here
</div>
Good golly, miss Molly! These answers are really overcomplicated.
CSS:
div.centered {
width:100%;
margin:0 auto;
text-align:center;
}
div.centered span {
padding:20px;
border:1px solid #000;
}
And then use this in your body:
<div class="centered"><span>Hello world!</span></div>