4 replies [Last post]
Petrini
Offline
newbie
Last seen: 4 years 15 weeks ago
Timezone: GMT-3
Joined: 2010-08-10
Posts: 2
Points: 3

Hello!
Well, right to the point, I've tried to center a div inside another div. I don't have the code with me now, but I'll try to make it as clear as possible.
I have a header, something like this:

#header {
  position: absolute;
  display: block;
  top: 10px;
  height: 30px;
  width: 800px;
  left: 50%;
  margin-left: -400px;
}

It works fine. Now I just want to add buttons to this block, something like:

.button {
  top: 5px;
  height: 20px;
  width: 40px;
  anything else that helps me centering it;
}

Then I can do:

<div id = "header">
  <div class = "button">Button 1</div>
  <div class = "button">Button 2</div>
  <div class = "button">Button 3</div>
</div>

The expected result is something like this:

How can this be achieved??
Thanks in advance!

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 24 weeks 2 days ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2636
Points: 1554

AP should be avoided for the

AP should be avoided for the main page structure. And negative margins like you have here, can be problematic. The buttons should be structured as a list, not divs. Remember, you want the code to be meaningful and clean. The usual methods for centering include the following:

ul {margin: 0 auto;}

#header {text-align: center;}

body {text-align: center;}

If you need further help, you will need to post a link, or provide us all the html and css.

Petrini
Offline
newbie
Last seen: 4 years 15 weeks ago
Timezone: GMT-3
Joined: 2010-08-10
Posts: 2
Points: 3

I got the point, but how do I

I got the point, but how do I add a fixed size box around the list elements?
I'm using position: inline; to align them horizontally, and I'm trying to use width/height to define it's size but it's not working. Plus, there's a space between the list elements and I'd like to remove it.

Well, here's the code, and I don't know how I could get the wanted result without using AP (assuming AP stands for Absolutely Positioned, am I right?)

<html>
<head>
<title>Test</title>
<style type="text/css">
 
ul {
	margin: 0 auto;
}
 
#header li {
	display: inline;
	width: 80px;
	border: 1px solid blue;
}
 
#header {
  position: absolute;
  display: block;
  top: 10px;
  height: 30px;
  width: 800px;
  left: 50%;
  margin-left: -400px;
  text-align: center;
  background: #808080;
  border: 1px solid blue;
}
 
</style>
</head>
<body>
	<div id="header">
		<ul>
			<li>A</li>
			<li>B</li>
			<li>C</li>
		</ul>
	</div>
</body>
</html>

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 24 weeks 2 days ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2636
Points: 1554

Yes, AP = Absolute Position.

Yes, AP = Absolute Position. Try something like this...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
ul {
	width: 800px;
	height: 30px;
	margin: 0 auto;
	background: #808080;
	border: 1px solid blue;
	text-align: center;
}
ul li {
	display: inline;
	border: 1px solid blue;
}
</style>
</head>
<body>
<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>
</body>
</html>

Debayan Gupta
Debayan Gupta's picture
Offline
Regular
Last seen: 2 years 22 weeks ago
Timezone: GMT-4
Joined: 2010-08-10
Posts: 45
Points: 51

Another solution

In case you want to center the buttons vertically as well, just centering won't help. You'll need to "display:block;float:left" the tags (inline-block causes problems on IE6).

This is one solution :

<!DOCTYPE html>
<html>
 
<head>
	<meta charset="utf-8"/>
	<title>center</title>
	<style type="text/css">
body {
	text-align:center;
	margin:0;padding:0;
}
#header {
	background:green;
	height:40px;
	width:800px;
	margin:10px auto 0px auto;
	padding-top:1px;
}
#header ul {
	list-style:none;
	width:310px;/*sum of widths + borders + a little bit extra*/
	margin:0px auto;
}
 
#header li {
	display:block;
	float:left;
	width:100px;line-height:25px;
	border:1px #000 solid;
	background:#FFF;
	margin-top:5px;
}
	</style>
 
</head>
 
<body>
 
<div id="header">
	<ul>
		<li>Button 1</li>
		<li>Button 2</li>
		<li>Button 3</li>
	</ul>
</div>
 
</body>
 
</html>
 
<!-- Debayan Gupta -->