homepage Welcome to WebmasterWorld Guest from 54.234.128.25
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
centering a div
whatson




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

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?

 

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved