Unable to Center a div - html

Question

I want img_manip_header_close block to be centered, but it's not.
CSS:
#img_manip_header_close {
display:inline-block;
cursor:pointer;
width:50px;
top:5px;
text-align:center;
margin-left:5px;
margin-right:5px;
left:125px;
}
#img_manip_header {
height:30px;
width:300px;
background-color:#DEDEDE;
margin: 0 auto;
display: block;
height: 20px;
line-height: 20px;
vertical-align: middle;
}
HTML
<div id="img_manip_header">
<div id="img_manip_header_close" onclick="window.location='index.php';">Close</div>
</div>

Answer 1

you are missing text-align:center; in #img_manip_header
#img_manip_header {
height:30px;
width:300px;
background-color:#DEDEDE;
margin: 0 auto;
display: block;
height: 20px;
line-height: 20px;
vertical-align: middle;
text-align:center;
}
http://jsfiddle.net/KS4Z3/

Answer 2

Just change the css for img_manip_header_close to this:
#img_manip_header_close {
cursor:pointer;
width:50px;
text-align:center;
margin: 0 auto;
}
Fiddle: http://jsfiddle.net/82Asv/
Specifically, you need to remove margins and display:inline-block, and add margin auto.
In fact, you don't even need text-align:center here.
Updated fiddle: http://jsfiddle.net/82Asv/1/

Answer 3

Lose the width on the #img_manip_header_close and change display:inline-block to display:block
Did for trick here

Answer 4

Try this:
http://jsfiddle.net/TFHv4/
<div id="img_manip_header">
<div id="img_manip_header_close" onclick="window.location='index.php';">Close</div>
</div>
#img_manip_header_close
{
cursor:pointer;
}
#img_manip_header
{
background-color:#DEDEDE;
margin: 0 auto;
display: block;
height: 20px;
text-align:center;
}

Answer 5

#img_manip_header_close
{
//lose this -> display:inline-block;
cursor:pointer;
width:50px;
top:5px;
//lose this -> text-align:center; (from what you said you want to align center 'img_manip_header_close' div not the text from inside div)
margin-left:5px;
margin-right:5px;
left:125px;
}
#img_manip_header
{
text-align:center; //add this line, in this way you will align center the content from 'img_manip_header' which is 'img_manip_header_close' div
height:30px;
width:300px;
background-color:#DEDEDE;
margin: 0 auto;
display: block;
height: 20px;
line-height: 20px;
vertical-align: middle;
}

Answer 6

That was the right CSS. Thanks for ideas:
#img_manip_header
{
height:30px;
width:300px;
background-color:#DEDEDE;
margin: 0 auto;
display: block;
height: 20px;
line-height: 20px;
vertical-align: middle;
text-align:center;
}
#img_manip_header_back
{
position:relative;
display:inline-block;
float:left;
cursor:pointer;
width:50px;
text-align:center;
margin-left:5px;
margin-right:5px;
}
#img_manip_header_close
{
position:relative;
display:inline-block;
cursor:pointer;
width:50px;
text-align:center;
margin-left:5px;
margin-right:5px;
margin: 0 auto;
}
#img_manip_header_next
{
position:relative;
display:inline-block;
float:right;
cursor:pointer;
width:50px;
text-align:center;
margin-left:5px;
margin-right:5px;
}