centering a div

Forum Moderators: not2easy

Message Too Old, No Replies

centering a div

whatson

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

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

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

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

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

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...

display:table [caniuse.com]

birdbrain

centering a div

whatson

not2easy

whatson

BeeDeeDubbleU

limbo

birdbrain

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week