homepage Welcome to WebmasterWorld Guest from 54.237.38.30
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
centering a div
whatson

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4511025 posted 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

WebmasterWorld Administrator 5+ Year Member Top Contributors Of The Month



 
Msg#: 4511025 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4511025 posted 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

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



 
Msg#: 4511025 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4511025 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4511025 posted 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