This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to horizontally center a div?
One simple way to make an object centered in HTML is using align='center', but it's not working for a div.
I tried:
style='text-align:center';
style='left:50%';
I even true a center tag
<center>
But I can't make my target div to be center.
<!DOCTYPE html>
<html>
<head>
<title>Center</title>
</head>
<body>
<div style="text-align: center;">
<div style="width: 500px; margin: 0 auto; background: #000; color: #fff;">This DIV is centered</div>
</div>
</body>
</html>
Tested and worked in IE, Firefox, Chrome, Safari and Opera. I did not test IE6. The outer text-align is needed for IE. Other browsers (and IE9?) will work when you give the DIV margin (left and right) value of auto. Margin "0 auto" is a shorthand for margin "0 auto 0 auto" (top right bottom left).
Note: the text is also centered inside the inner DIV, if you want it to remain on the left side just specify text-align: left; for the inner DIV.
Edit: IE 6, 7, 8 and 9 running on the Standards Mode will work with margins set to auto.
I think that the the align="center" aligns the content, so if you wanted to use that method, you would need to use it in a 'wraper' div - a div that just wraps the rest.
text-align is doing a similar sort of thing.
left:50% is ignored unless you set the div's position to be something like relative or absolute.
The generally accepted methods is to use the following properties
width:500px; // this can be what ever unit you want, you just have to define it
margin-left:auto;
margin-right:auto;
the margins being auto means they grow/shrink to match the browser window (or parent div)
UPDATE
Thanks to Meo for poiting this out, if you wanted to you could save time and use the short hand propery for the margin.
margin:0 auto;
this defines the top and bottom as 0 (as it is zero it does not matter about lack of units) and the left and right get defined as 'auto' You can then, if you wan't override say the top margin as you would with any other CSS rules.
it depends if your div is in position: absolute / fixed or relative / static
for position: absolute & fixed
<div style="position: absolute; /*or fixed*/;
width: 50%;
height: 300px;
left: 50%;
top:100px;
margin: 0 0 0 -25%">blblablbalba</div>
The trick here is to have a negative margin half the width of the object
for position: relative & static
<div style="position: relative; /*or static*/;
width: 50%;
height: 300px;
margin: 0 auto">blblablbalba</div>
for both techniques, it is imperative to set the width.
how about something along these lines
<style type="text/css">
#container {
margin: 0 auto;
text-align: center; /* for IE */
}
#yourdiv {
width: 400px;
border: 1px solid #000;
}
</style>
....
<div id="container">
<div id="yourdiv">
weee
</div>
</div>
Related
I want to have two horizontal divs.
The width of the left div is 200px and is fixed.
The width of the right div is 600px by default and should be responsive. If user resizes the browser, the width of right div may decrease and scroll bar appears on right div.
I am trying to use float and overflow to do it. But I can't think of the right solution.
What should I do?
Use display:table and display:table-cell for getting better result.
<div class="main">
<div class="left">sdfsf</div>
<div class="right">sfsdfdsfsfdsfds</div>
</div>
.main{display:table; width:100%;}
.left
{
display:table-cell;
min-width:200px;
width:200px;
border:1px solid red;
}
.right
{
display:table-cell;
width:auto;
border:1px solid green;
}
DEMO
Your request is a bit odd and can be done though not using purely CSS level 1 unfortunately. In order to have the elements "float" and have the second div overflow instead of the body element you'll have to use a combination of position and overflow.
Copy this to an (x)html file and resize the browser...
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
</head>
<body style="overflow: hidden">
<div style="overflow: auto; max-width: 800px;">
<div style="background-color: #ff0; height: 200px; width: 200px; position: absolute; left: 0px; top: 0px;">left</div>
<div style="background-color: #0ff; height: 200px; overflow-x: auto; position: absolute; left: 200px; top: 0px; max-width: 600px;">
<div style="min-width: 800px;">right child, right child, right child, right child, right child, right child, right child, right child, right child, right child, right child, right child, right child, </div></div>
</div>
</body>
</html>
I highly recommend not using this even if your browser support requirement is extremely relaxed simply because using static layouts alone is really IE6 era sort of in-the-box-of-a-box type thinking. If it's for a client you really need to force-override them.
Just because I don't like display:table:
it is possible to achieve what you're looking for using flexbox.
The idea is to set the right element's width using width:100% and the left using width: 200px; min-width:200px.
I'm not sure what you mean regarding the overflow, but my solution has the right element's overflow set to scroll, and the contentn is put within another div whose width is 600px
Here's a demo.
I am trying to have 3 images aligned in one block. They have to stay in the same sized container and fit horizontally.
Here's the code:
<div class="container">
<img src="http://images2.webydo.com/31/313624/3958/21b785db-14ea-42f7-af0d-7e7a8d8019d9.jpg" />
<img src="http://images2.webydo.com/31/313624/3958/9657ddfd-81e8-4154-bc61-bbe30e4a8740.jpg" />
<img src="http://images2.webydo.com/31/313624/3958/909af36d-b941-4a20-9441-20505c035da3.jpg"/>
</div>
.container {
width: 300px;
height: 200px;
position:relative;
float: left;
text-align: center;
}
.container img {
width: 100%;
height: auto;
margin: 5px;
}
In my CSS solution, I divided the "container" class width by 3 (300px /3) and then subtracted 10px (which i got from padding-left and padding-right of each image). So a single image should have a width of 90px. However, I also wanted to subtract 5px more for browser spacing so the total width of each image should be 85px. Here is the code:
<html>
<head>
<style>
.container {
width: 300px;
height: 200px;
position:relative;
float: left;
text-align: center;
}
.container img {
width: 85px;
height: auto;
margin: 5px;
}
</style>
</head>
<body>
<div class="container">
<img src="http://images2.webydo.com/31/313624/3958/21b785db-14ea-42f7-af0d-7e7a8d8019d9.jpg" />
<img src="http://images2.webydo.com/31/313624/3958/9657ddfd-81e8-4154-bc61-bbe30e4a8740.jpg" />
<img src="http://images2.webydo.com/31/313624/3958/909af36d-b941-4a20-9441-20505c035da3.jpg"/>
</div>
</body>
</html>
Hm...I don't think you can have all three images in a horizontal line if you give them all a width:100%. That property would cause each image to take the full width of the container, meaning each image would be pushed to the next line.
You'll have to give the images a smaller width to fit them all on one line. 100% / 3 = 33.3% (rounded), so use that instead. Here's some modified CSS for .container img that seems to work:
.container img {
width: 33.3%;
height: auto;
padding:5px;
box-sizing:border-box;
-moz-box-sizing:border-box;
}
Note that in addition to changing the images' widths, I also changed the margin to padding, and made use of the box-sizing attribute (read more about it here). This lets you keep that same spacing of 5px around images, without bumping any images onto a second line.
Also, the HTML needs to be altered slightly. In this case, we're taking advantage of the <img> element's default display:inline-block to have them all display on the same line. However, any whitespace in between this kind of element will result in a space between the images, so that needs to be eliminated:
<div class="container">
<img src="http://images2.webydo.com/31/313624/3958/21b785db-14ea-42f7-af0d-7e7a8d8019d9.jpg" /><img src="http://images2.webydo.com/31/313624/3958/9657ddfd-81e8-4154-bc61-bbe30e4a8740.jpg" /><img src="http://images2.webydo.com/31/313624/3958/909af36d-b941-4a20-9441-20505c035da3.jpg"/>
</div>
If you don't understand what I mean by that, try formatting each <img> element onto its own line in the HTML, and see how that affects their positioning.
Here's a JSFiddle so you can see what this achieves. Let me know if you have any questions, and I'll be happy to help further!
EDIT: Alternatively, if you really want to keep the whitespace between your <img> elements in your HTML, you could compensate for the unwanted extra space with a negative margin. Just add margin-right:-4px; to your styles for .container img. Updated JSFiddle to show what this results in.
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/
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
CSS properties being passed up to the parent element when the DIV is empty
I'm a newbie for CSS layout design.
What I'd like to do at the moment is that I want to make two Div boxes, one nested inside one another. Anyway, my problem is the top margin I set to the inner box didn't behave the way I wanted.
Pls take the portion of script below for example:
[demo.html]
<html>
<header>
<title>Mock-up page</title>
<link href="stylesheets/demo.css" rel="stylesheet" type="text/css">
</header>
<body>
<div id="box1">
<div id="box2">div 2</div>
</div>
</body>
</html>
[demo.css]
#box1{
width: 300px;
height: 300px;
background-color:#0000FF;
}
#box2{
margin-top: 30px;
background-color:#008000;
}
The effect it produced was it only pushed the outer box 30px down from body tag (left-sided in the picture), which wasn't what I had expected (right-sided in the picture).
What was the reason why this happened and how to correct the styling?
Change the margin-top to padding-top will do what you want.
This is a know issue in many browsers.
When the first child of an element has a margin-top (no content before it) the margin overflow the top of the parent element and pushes it like in your case.
Other solutions exists, but all of them are a bit hacky:
Apply a position: relative to the child and change the margin-top to a margin-bottom and apply top: 20px;;
Create an element before the inner box with some content ( can be used here) with height: 0; and overflow: hidden;;
Set a border-top: 1px solid transparent or the same color of the background of the element (in this case, pay attention that the border is added to the height of the object;
and so on...
You could add position: relative to #box1 and position: absolute to #box2.
See this example
CSS Positions Explained
CSS
#box1{
display:block;
width: 300px;
height: 300px;
background-color:#0000FF;
border:solid transparent 1px;
}
#box2{
margin-top: 30px;
background-color:#008000;
}
HTML
<div id="box1">
<div id="box2">div 2</div>
</div>
If you keep the outer box empty (no text node) then it's doing this behavior and to be honest I didn't understand why, but I found it here why it does so and it's known as collapsed margin and I've added border:solid transparent 1px; to soleve the issue but alternatively you can use padding for outer DIV. Here is also an answer on SO.
Demo.
This article by Chris Coiyer does a good job of explaining box-sizing. Understanding that will help you.
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.