I'm creating a portfolio and want to know how I can make it center itself on the browser page. The link to it is
http://optiq-portfolio.zxq.net/portfolio.html
I tried adding
margin-left:0 auto;
margin-right:0 auto;
to the body in css, but that's not working. How can I fix this?
There's more to it than just that. You need to define a wrapper div, set the width on that, and then use margin: 0 auto
For instance, if you had your body defined with width:1000px; it'll already be centered. Of course, this messes up the rest of your stuff.
margin-left: 0 auto isn't valid also.
You don't want to add margins to your body, the proper way to handle this is to have a container element with margin: 0px auto; text-align:left;. On your body element you will want text-align:center;.
The rest of your code should be contained within the container element.
This will center your page in most modern browsers.
As others have said, you need to create a wrapper container so that it encloses your main content. Then specify a fixed width and automatic horizontal margins with CSS. David Walsh has a nice explanation of this in his blog post Horizontally Center Your Website Structure Using CSS.
HTML
<html>
<head>
<title>My Site</title>
</head>
<body>
<div id="wrap">
<!-- WEBSITE GOES HERE -->
</div>
</body>
</html>
CSS
#wrap {
width: 900px;
margin: 0 auto;
}
margin-left: 0 auto; and margin-right: 0 auto; are not valid CSS properties.
You can do something like margin:0 auto; which will set top and bottom to 0 and left and right to auto.
Related
I'm using margin: 0 auto; to center the contents of my pages.
Recently I discovered that using an automatic margin on a body has the same visual effect as an automatic margin on a (wrapper) div.
<!DOCTYPE>
<html>
<head>
<style>
div#wrapper {
margin: 0 auto;
width: 60%;
}
</style>
</head>
<body>
<div id="wrapper">
<!-- Rest of page. -->
</div>
</body>
</html>
Compared to;
<!DOCTYPE>
<html>
<head>
<style>
body {
margin: 0 auto;
width: 60%;
}
</style>
</head>
<body>
<!-- Rest of page. -->
</body>
</html>
It seems better as it removes an (unneccesary) element.
Are there any pitfalls that need to be considered when using this approach?
I don't recommend it. Setting margin on the body boxes you in needlessly, and you end up using negative margins and absolute positioning to break out.
Stick with your container (or wrapper) model - it's widely considered a best practice. Check the source for this and any other professionally designed site and you'll see the same.
I use the auto margin on the body all the time. You just have to remember that if you want to set a background for the page, you have to set it to the html tag, as people often set the page background on the .
I want to add space in the HTML document like the ones inside the orange rectangle. I don't know the technical term for what it's professionally called. Apologies.
If you are looking to center your web page and you are using a fixed width on your main container this can easily be achieved.
CSS
.container {
margin:0 auto; /* this will center the page */
width:960px; /* use your width here */
}
HTML
<body>
<div class="container">
<!-- all your great content here -->
</div>
</body>
If you need help applying this to your html/css please post your html and I would be glad to help you.
Why not do this? :
<style type="text/css">
html, body {
margin: 0;
border: 0;
width: 100%;
}
body {
padding: 0 20px;
}
#main {
margin: 0 auto; /* in case you want to set a fixed width on this as well */
}
</style>
<body>
<div id="main"></div>
</body>
This way, depending on the width on the window, the main div will resize and there will always be a fixed space on both sides. If you want the main div have a fixed width and the spacing on the sides to be resized automatically, use the other solutions.
Those would be margins. But your better option would be to wrap the main area in a div or other block element/sectioning root, set it to the width that you want, and then center it with margin: 0 auto;
you need margins. set the style to margin:0 auto; that will center your div
The page is here:
https://gentle-day-3026.herokuapp.com/
The css file like this:
https://gentle-day-3026.herokuapp.com/stylesheets/base.css
another is to use reset.css to replace the base.css
(the new user just 2 hyperlink allowed)
Try to change some many times, include methods like:
<body>
<div id="divMain">
...
</div>
</body>
body
{
margin: 0;
padding: 0;
text-align: center;
}
#divMain
{
margin: 0 auto;
padding: 0;
width: 1024px;
text-align: left;
}
but it didn't work.
Thank you for your help!
I even test it in a very simple html:
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="stylesheets/base.css" media="Screen" type="text/css" />
</head>
<body>
<div id="divMain">
<h1> hello </h1>
</div>
</body>
</html>
It still did not work!
On your current page, body has a fixed width of 720px. Remove this. Next, set the fixed width on your outer-most div that sits just inside the body. Additionally, give this div a margin of 0 auto, which will result in it being centered horizontally.
What you have done is fine. But you given a width to the body. Remove the width attribute from there. Try this CSS and it works:
body {
color: #999999;
font: 14px/1.5em "Lucida Grande",Arial,sans-serif;
margin: 20px;
width: auto;
}
See base.css line no. 8 has the same width: 720px; for the body! And also, for the <div align="center"> change it to <div class="center"> and give css as .center {width: 720px; margin: auto;}. Please try this and let us know.
Finally you should be having this:
.center {width: 720px; margin: auto;}
<div class="center">
You need to set your body width to 100%, your <div> to whatever size you want (eg 720px) and its margin to 0 auto.
The sample code that you have posted works perfectly for aligning #divMain to the center (horizontally)...
Looking at the code you have posted for your site, it looks like you have defined a fixed width for your body element (see line 12 of base.css). Removing this fixed width, and then moving the correct width to the wrapper div (currently set using align="center") should solve your problem.
body{
width: 100%;
height: 100%;
}
.divMain{
width: 720px;
margin: 0 auto;
}
May be it helps you.
Try to add this style in your code.
You have 2 problems here:
You set the margin of <body> to be 0 (inline css above). What's more, <body>'s width is only 720px (base.css, line 8), which is smaller than the width of most desktop viewports. As a result, <body> snaps to the left of the viewport, with margin-left as 0 and plenty of space to the right. With <body> aligned to the left, its children (such as #divMain) cannot possibly look centered. What you can do is to either center <body> by using margin: 20px auto, or by setting <body>'s width to be 100% to fill the entire viewport.
The width of the child, #divMain, is larger than that of its body. You will have to set the width of #divMain to be smaller than 720px (e.g. 500px) - the only way for a child to be centered horizontally within its parent using margin:0 auto is for the parent's width to be larger. Of course, I don't think you intended to have #divMain smaller than 1024px in width, so I'd suggest setting <body>'s width to be 100%, which almost guarantees that its width will be larger than #divMain's.
In short, you can either have:
body{width:720px;margin:20px auto;} #divMain{width:500px;margin:0 auto;}
or
body{width:100%;} #divMain{width:1024px;margin:0 auto;}
Hope that helps.
HTML
<body>
<div class="div-body-width">
....
</div>
</body>
CSS
body {
margin: 0px;
padding: 0px;
}
/*Insert here your width*/
.div-body-width {
width: 1024px;
margin: 0 auto;
}
Wrap the content of your body in a div :
<body>
<div id="page">
...
</div>
</body>
Then in your css :
#page {
margin: auto;
}
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.
how can i set div position at the center of the page with size, for example, 80%/80%.
UPD: margin: 0 auto; works, but only for horizontal alignment. And i also need vertical.
This page talks about some different ways to achieve vertical centering using css. I've used method 2 before with success but I consider all of these a hack at best.
Set a fixed width and auto-margins.
<style type="text/css">
#center {
width:300px;
margin-left:auto;
margin-right:auto;
}
</style>
<body>
<div id="center"></div>
</body>
This does what you want, but it is not pretty.
<div style="margin: 0 auto;width:80%;height:80%;">
This will probably not work for you however because you did not provide code
</div>