Центрирование абсолютного позиционированного поля в быстродействующем месте

Question

Я пытаюсь центрировать абсолютный позиционированный логотип и другие элементы, чтобы следовать за заголовком ширины 100%.

Какова процедура центрирования элемента с абсолютным позиционированием и обеспечения его, а остальные элементы, которые я добавлю, будут оставаться центрированными при перемещении от 320 пикселей до 475 пикселей.

Вот код ниже я до сих пор, она сосредоточена на 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-blockdiv, и установите контейнер заголовка на text-align:center.

.header { 
 
    height:100px; 
 
    background-color:grey; 
 
    text-align:center; 
 
} 
 

 
.logo { 
 
    display:inline-block; 
 
    width:100px; 
 
    height:100px; 
 
    background-color:blue; 
 
}

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

... или, если требуется только некоторые биты, сосредоточенные и другие не:

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

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

Answer 2

Если вы не должны поддерживать старые браузеры, и вы не против использовать CSS3, тогда вы можете использовать это в своем .logo классе:

left: calc(50% - XXXpx); 

где XXX должна составлять половину ширины вашего логотипа

Answer 3

Другим вариантом будет использовать относительное положение и и запас: 0 авто; вместо абсолюта и процента в левом;

логотип {

margin: 0 auto; 
position: relative; 

}

здесь рабочий пример: http://jsfiddle.net/3yLd2n5q/

надеюсь, что это помогает

Answer 4

Используйте абсолютно позиционирован элемент в качестве контейнера для ваш логотип и другие элементы NTS.

Для центрирования контейнера:

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

Затем установите выравнивания текста по центру к центру элементов внутри контейнера.

Вот скрипка - http://jsfiddle.net/0a70ccz1/