Выровнять фиксированный элемент в CSS

Question

Я хотел бы выровнять изображение по центру.Очень просто, указав div ширину и margin: auto;.Но div также должен иметь свойство position: fixed;, которое, как оказалось, не объединяется.

Вот мой HTML:

<div class="header_container">
    <div class="header">
        <div class="header_links_icon">
            <a href="https://www.facebook.com target="_blank" class="header_facebook">
                <div class="header_facebook_icon">&nbsp;</div>
            </a>
            <a href="https://twitter.com/" target="_blank" class="header_facebook">
                <div class="header_twitter_icon">&nbsp;</div>
            </a>
        </div>
    </div>
</div>

А вот CSS, который я использую:

.header_container {
    background-color: black;
    padding-top: 35px;

}

.header {
    background-image: url('../images/css/header.png');
    background-repeat: no-repeat;
    height: 605px;
    margin: auto;
    width: 1440px;
    position: fixed
}

И это изображение header.png, которое должно быть выровненопосередине экрана и фиксированное положение ... Как мне это сделать?

Answer 1

Вы можете сделать свой контейнер заголовка фиксированным, тогда ваш .header будет работать:

.header_container {
    background-color: black;
    padding-top: 35px;
    position: fixed;
    top:0;
    left:0;
    right:0;
}

.header {
    background-image: url('../images/css/header.png');
    background-repeat: no-repeat;
    height: 605px;
    width: 1440px;
    margin: auto;
}

Другой способ будет с отрицательными полями:

.header {
    background-image: url('../images/css/header.png');
    background-repeat: no-repeat;
    height: 605px;
    width: 1440px;
    position: fixed;
    left: 50%;
    margin-left: -720px;
}

Answer 2

Укажите фиксированную позицию в вашем родительском классе заголовка вместо использования фиксированной позиции в дочернем классе заголовка ...

.header_container {        
        position: fixed;
        top:0;
        left:0;
        right:0;

}

Answer 3

Привет, вы можете присвоить фиксированную позицию основному классу header_container, чтобы он работал.

    .header_container {
    background-color: black;
    position: fixed;
    top:0;
    left:0;
    right:0;
}

.header {
    background:green;
    height: 100px;
    width: 500px;
    margin: auto;
}

см. Демоверсию: - http://jsfiddle.net/rohitazad/W9ZcY/17/

Answer 4

Это, вероятно, будет работать:

.center {width:1440px;margin:0 auto;}

.header {width:1440px;position:fixed;etc...} // don't use margin:auto here

, где

 <div class='header_container>
   <div class='center'>
     <div class='header'>
      <!-- contents -->
     </div>
   </div>
 <div>

Answer 5

Проблема в том, что вы можете позиционировать фиксированный элемент с процентами или пикселями.Ни один из них не сделает правильный расчет смещения, чтобы сделать его действительно центрированным.Таким образом, вы должны отсортировать хак, чтобы заставить его вести себя правильно.

Позиционирование в процентах и ​​смещение с отрицательными полями:

//assuming the block is 200px wide and 100px tall
.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;
}

В качестве альтернативы , вы можете центрировать егоисправление размещения контейнера, затем центрирование вашего объекта в этом контейнере (как упомянуто @rgthree), это также работает.

Answer 6

Вы должны установить левое положение на пятьдесят процентов, а левое поле - на половину ширины элемента. Это работает только для элементов с заданной шириной.

http://jsfiddle.net/W9ZcY/

.header_container {
    background-color: black;
    padding-top: 35px;
    border: 1px solid red;
}

.header {
    border: 1px solid blue;
    background: gray;
    height: 105px;
    left: 50%;
    margin-left: -70px;
    width: 140px;
    position: fixed
}​