CODEWITHSUNDEEP
htmlcsscss-floatcentering
Tigran
Tigran

Reputation: 1057

Unable to Center a div

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>

Upvotes: 0

Views: 1237

Answers (6)

Tigran
Tigran

Reputation: 1057

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;
}

Upvotes: 0

Aditzu
Aditzu

Reputation: 706

 #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;

}

Upvotes: 0

Juan
Juan

Reputation: 1382

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;

}

Upvotes: 0

Cheg
Cheg

Reputation: 45

Lose the width on the #img_manip_header_close and change display:inline-block to display:block

Did for trick here

Upvotes: 0

Abhitalks
Abhitalks

Reputation: 28387

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/

Upvotes: 0

Davor Mlinaric
Davor Mlinaric

Reputation: 2017

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/

Upvotes: 1

Related Questions