标志{

Question

我试图将一个绝对定位的徽标和其他元素集中在100％宽度的标题内。

将绝对定位项目居中并确保它和我将添加的其他元素在从320px移动到475px时保持居中的步骤是什么。

以下是我到目前为止的代码，它以320px为中心，但在展开页面时不会保持居中：

@media (max-width: 475px) and (min-width: 320px)
#header {
height: 170px;
width: 100%!important;
position:relative;
}

#logo
left: 21%;
top: -7px;
position: absolute;
}

Answer 1

不确定您是否需要媒体查询。

这样的事情怎么样？将您想要的徽标和任何其他内容包含在inline-block div中，并将标题容器设置为text-align:center。

＆＃13;

.header {
    height:100px;
    background-color:grey;
    text-align:center;
}

.logo {
    display:inline-block;
    width:100px;
    height:100px;
    background-color:blue;
}

＆＃13;

<div class="header">
    <div class="logo"></div>
</div>

＆＃13;

...或者，如果您只需要一些位居中而其他位不是：

＆＃13;

.header {
    position:relative;
    height:100px;
    background-color:grey;
}

.content {
    position:absolute;
    height:80px;
    padding:10px;
    text-align:center;
}

.left {    
    left:0;
    background-color:red;
}

.center {
    left:50%;
    transform:translateX(-50%);
    background-color:blue;
}

.right {
    right:0;
    background-color:red;
}

＆＃13;

<div class="header">
    <div class="content left">Left</div>
    <div class="content center">Centered</div>
    <div class="content right">Right</div>
</div>

＆＃13;

Answer 2

如果您不必支持旧浏览器，并且不介意使用CSS3，那么您可以在.logo类中使用它：

left: calc(50% - XXXpx);

其中XXX应为徽标宽度的一半

Answer 3

另一种选择是使用相对位置和边距：0 auto;而不是绝对和左边的百分比;

标志{
Foo.Qux
}

这是一个工作示例： http://jsfiddle.net/3yLd2n5q/

希望有所帮助

Answer 4

使用绝对定位的元素作为徽标和其他元素的容器。

使容器居中：

top:50%; 
left: 50%; 
transform: translate(-50%, -50%);

然后将text-align设置为容器内的中心元素。

这是一个小提琴 - http://jsfiddle.net/0a70ccz1/

将响应位置中的绝对定位框居中

4 个答案:

标志{