asked on

How do I center align a block element horizontally in CSS?

Hello,

I'm new to CSS layouts and I'm trying to build a simple color-picker. I have it created, but I can't get it to align in the center horizontally. I know this has something to do with it being a block element and text-align: center; not working, and I know that typically you use margin: auto; to align block elements, but no matter what I try it stays on the left. In the past I would have just put it in a table, but I'm trying to stop using tables for layout purposes ;) Any tips greatly appreciated.

Markup below.

qwerty021600

give some value in
line-height : 25px;
and give text-align: center;
and See if this works.

Spiderstave

ASKER

I'm sorry, I forgot to include my markup. Here it is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Color Picker</title>
 
<style>
 
#colorpicker {	
	float: left;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	text-align: center;
}
 
#colorpicker div.space {
	display: block;
	width: 6px;
}
 
#colorpicker li {	
	float: left;
	display: block;
	margin: 0;
	padding: 0;
	
}
 
#colorpicker a {
	display: block;
	margin: 0;
	padding: 10px 20px;	
	text-decoration: none;	
	border: 1px solid #000000;
}
 
#colorpicker a:hover {		
	border: 1px solid #cccccc;
}
 
#colorpicker .space {
	display: block;
	margin: 0;
	padding: 10px;	
}
 
#colorpicker li.pink{
	background-color: #ffb8e8;
}
 
#colorpicker li.brown{
	background-color: #625d5e;
}
 
#colorpicker li.blue{
	background-color: #b9e1f8;
}
 
#colorpicker li.yellow{
	background-color: #ffd8a7;
}
    
</style>         
 
</head>
 
<body>
 
<ul id="colorpicker">
	<li class="pink"><a href="#"> </a></li>
    <li><div class="space"></div></li>
    <li class="brown"><a href="#"> </a></li>
    <li><div class="space"></div></li>
    <li class="blue"><a href="#"> </a></li>
    <li><div class="space"></div></li>
    <li class="yellow"><a href="#"> </a></li>
</ul>
        
 
</body>
</html>

Open in new window

qwerty021600

Try to give spacing from left.
And see if it works..

David S.

Which elements are you trying to center?

I suggest you put margin:13px to "#colorpicker li" and remove the spacers.

Spiderstave

ASKER

Hi Kravimir,

Thanks for the tip regarding the spacers, you were right (as always), they were unnecessary if I set the margin: 13px on '#colorpicker li'.

I'm trying to center the entire <ul> element. I don't think I'm able to because I have float: left; on '#colorpicker' and '#colorpicker li', but I have to have float: left; on those because I have display: block; on '#colorpicker li a' so that I can set padding to get the squares the size I need.

Am I taking the wrong approach? I've rewritten this from scratch several times and tried to write it with as clean CSS as I know, but unfortunately I don't know a whole lot of CSS yet.

Thanks as always for your expertise!

P.S. I'm placing non-breaking spaces inside of the <a>'s because empty <li>'s won't display in IE for some reason.

Here is the new markup with your margin suggestion:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Color Picker</title>
 
<style>
 
#colorpicker {	
	float: left;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	text-align: center;
}
 
#colorpicker li {	
	float: left;
	display: inline;
	margin: 13px;
	padding: 0;
	
}
 
#colorpicker a {
	display: block;
	margin: 0;
	padding: 10px 20px;	
	text-decoration: none;	
	border: 1px solid #000000;
}
 
#colorpicker a:hover {		
	border: 1px solid #cccccc;
}
 
#colorpicker .space {
	display: block;
	margin: 0;
	padding: 10px;	
}
 
#colorpicker li.pink{
	background-color: #ffb8e8;
}
 
#colorpicker li.brown{
	background-color: #625d5e;
}
 
#colorpicker li.blue{
	background-color: #b9e1f8;
}
 
#colorpicker li.yellow{
	background-color: #ffd8a7;
}
    
</style>         
 
</head>
 
<body>
 
<ul id="colorpicker">
    <li class="pink"><a href="#"> </a></li>    
    <li class="brown"><a href="#"> </a></li>  
    <li class="blue"><a href="#"> </a></li>   
    <li class="yellow"><a href="#"> </a></li>
</ul>
        
 
</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

David S.

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Spiderstave

ASKER

I used display:inline-block instead of float:left and it works great in Firefox 3, but unfortunately in IE7 it's creating line breaks between <li>'s. Everything is being centered, though, so that's a step forward!

I did some research and found this:

"IE 6/7 accepts the value only on elements with a natural display: inline."

So because <li> is naturally a block element, does that mean it can't be set to display: inline-block?

Here's my new markup:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Color Picker</title>
 
<style>
 
#colorpicker {	
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	text-align: center;
}
 
#colorpicker li {	
	display: inline-block;
	margin: 13px;
	padding: 0;
	width: 51px;
	height: 51px;
	
}
 
#colorpicker a {
	display: inline-block;
	margin: 0;
	width: 50px;
	height: 50px;
	text-decoration: none;	
	border: 1px solid #000000;
}
 
#colorpicker a:hover {		
	border: 1px solid #cccccc;
}
 
#colorpicker li.pink{
	background-color: #ffb8e8;
}
 
#colorpicker li.brown{
	background-color: #625d5e;
}
 
#colorpicker li.blue{
	background-color: #b9e1f8;
}
 
#colorpicker li.yellow{
	background-color: #ffd8a7;
}
    
</style>         
 
</head>
 
<body>
 
<ul id="colorpicker">
	<li class="pink"><a href="#"> </a></li>    
    <li class="brown"><a href="#"> </a></li>  
    <li class="blue"><a href="#"> </a></li>   
    <li class="yellow"><a href="#"> </a></li>
</ul>
        
 
</body>
</html>

Open in new window

Spiderstave

ASKER

I went back and checked the link that Kravimir posted and noticed that their version looked fine in IE, so I checked out the source and noticed they had a specific style written out for IE. I copied the style, and presto! it works fine in IE. Thanks for the link, Kravimir!

Here is what I added at the end of my CSS:

<!--[if lte IE 7]>
<style type="text/css">
#colorpicker li {
  display: inline;
}
</style><![endif]-->

Open in new window

Spiderstave

ASKER

Thanks for your help once again, Kravimir! I owe you a beer!