我想让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>
答案 0 :(得分: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;
}
答案 1 :(得分:0)
只需将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/
答案 2 :(得分:0)
丢失#img_manip_header_close上的宽度并更改display:inline-block to display:block
这里有诀窍
答案 3 :(得分:0)
试试这个:
<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;
}
答案 4 :(得分:0)
#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;
}
答案 5 :(得分:0)
这是正确的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;
}