Welcome to WebmasterWorld Guest from 54.145.166.247

Forum Moderators: not2easy

Message Too Old, No Replies

centering a div

   
9:50 pm on Oct 22, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



If you want something completely centered within another div, how is this done?

Is it like this?
<div id="container">
<div id="centered">centered div</div>
</div>

And how do you center the div vertically?
11:34 pm on Oct 22, 2012 (gmt 0)

WebmasterWorld Administrator 5+ Year Member Top Contributors Of The Month



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?
7:39 am on Oct 23, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I was giving it an id, I just named the id "centered", as it was germane to the topic.
8:08 am on Oct 23, 2012 (gmt 0)

WebmasterWorld Senior Member beedeedubbleu is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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;
}
8:59 am on Oct 23, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



#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)
12:31 pm on Oct 23, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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