Question

我想让img_manip_header_close块居中，但事实并非如此。

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

text-align:center;

中缺少#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

只需将img_manip_header_close的css更改为：

#img_manip_header_close {
    cursor:pointer;
    width:50px;
    text-align:center;
    margin: 0 auto;
}

小提琴：http://jsfiddle.net/82Asv/

具体来说，您需要删除边距和display:inline-block，并添加自动边距。

事实上，你甚至不需要text-align:center。

更新了小提琴：http://jsfiddle.net/82Asv/1/

Answer 3

丢失#img_manip_header_close上的宽度并更改display：inline-block to display：block

这里有诀窍

Answer 4

试试这个：

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

这是正确的CSS。感谢您的想法：

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

无法居中div

6 个答案: