not2easy
msg:4511053 | 11:34 pm on Oct 22, 2012 (gmt 0) |
Your div id's would need to be defined somewhere, normally in your .css stylesheet but it could be on the same page (Inline css). Merely naming it "centered" won't do it. Are you using a stylesheet?
|
whatson
msg:4511163 | 7:39 am on Oct 23, 2012 (gmt 0) |
I was giving it an id, I just named the id "centered", as it was germane to the topic.
|
BeeDeeDubbleU
msg:4511168 | 8:08 am on Oct 23, 2012 (gmt 0) |
I am not a CSS expert but I would normally do this by setting the left and right margins to auto as in.
#centered {
width: 960px;
margin-right: auto;
margin-left: auto;
}
|
limbo
msg:4511190 | 8:59 am on Oct 23, 2012 (gmt 0) |
#centered {
width: 960px;
margin-right: auto;
margin-left: auto;
} |
|
That's exactly right - to center horizontally - you specify automatic left and right margins and a width.
A couple of things to note, you should try and use ID's that better describe the content, not how it is styled. So if it was navigation you want to centre in a you might want to use HTML/CSS like so
<div id="navigation">[Content to be centred]</div>
#navigation {width: 960px;margin:0 auto;}
(note you can combine margin properties)
|
birdbrain
msg:4511275 | 12:31 pm on Oct 23, 2012 (gmt 0) |
Hi there whatson,
here is an example...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title> centered H and V</title>
<style type="text/css">
html,body {
height:100%;
margin:0;
}
body {
display:table;
width:100%;
background-color:#f0f0f0;
}
#container {
display:table-cell;
height:100%;
vertical-align:middle;
}
#centered {
width:658px;
padding:20px;
border:1px solid #999;
margin:auto;
background-color:#fff;
box-shadow:10px 10px 10px #666;
}
</style>
</head>
<body>
<div id="container">
<div id="centered">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
ultricies sollicitudin nisi, ut molestie felis adipiscing sit
amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae
faucibus felis. Vivamus at metus eget eros consequat fringilla.
Quisque magna magna, laoreet eu tempus sit amet, fringilla at
tellus. Praesent felis tortor, scelerisque vitae fringilla
non, porttitor et lacus. Ut ut sapien nec quam tincidunt
consectetur in nec lacus.
</p>
</div>
</div>
</body>
</html>
|
|
...and the support...
birdbrain
|
|
