在下面的例子中,#logo
的位置是绝对的,我需要它在#header
中水平居中。通常,我会为相对定位的元素做一个margin:0 auto
,但我被困在这里了。有人能给我带路吗?
JS小提琴:http://jsfiddle.net/DeTJH/
HTML
<div id="header">
<div id="logo"></div>
</div>
CSS
#header {
background:black;
height:50px;
width:100%;
}
#logo {
background:red;
height:50px;
position:absolute;
width:50px
}
发布于 2013-05-26 18:09:19
您必须为margin: auto
指定left
和right
属性0
值以使徽标居中。
因此,在这种情况下:
#logo {
background:red;
height:50px;
position:absolute;
width:50px;
left: 0;
right: 0;
margin: 0 auto;
}
您可能还想为#header
设置position: relative
。
这是因为,将left
和right
设置为零将水平拉伸绝对定位的元素。现在,当margin
被设置为auto
时,魔术就会发生。margin
占用了所有额外的空间(两边相等),将内容保留给它指定的width
。这会导致内容居中对齐。
发布于 2013-05-26 19:04:08
答案中没有使用calc
,这是一个更干净的解决方案。
#logo {
position: absolute;
left: calc(50% - 25px);
height: 50px;
width: 50px;
background: red;
}
适用于大多数现代浏览器:http://caniuse.com/calc
也许在没有后备的情况下使用它还为时过早,但我认为对未来的访问者来说,这可能会有所帮助。
发布于 2013-05-26 18:16:31
根据我的经验,最好的方式是right:0;
、left:0;
和margin:0 auto
。这样,如果div很宽,那么您就不会受到left: 50%;
的阻碍,因为它会抵消div,从而导致添加负边距等。
演示http://jsfiddle.net/kevinPHPkevin/DeTJH/4/
#logo {
background:red;
height:50px;
position:absolute;
width:50px;
margin:0 auto;
right:0;
left:0;
}
https://stackoverflow.com/questions/16758102
复制相似问题