CSS вертикальное выравнивание внутри FIXED position div

У меня заголовок: FIXED position.

Вот css:

#header{
    position:fixed;
    height: 6em;
    display:block;
    width: 100%;        
    background: rgba(255, 255, 255, 1);
    z-index:9;
    text-align:center;
    color: #000000; 
}

И внутри, я хочу центрировать текст по середине и по вертикали. Вот что я до сих пор, но он не работает. Все примеры онлайн-показаний с абсолютной позицией в качестве контейнера, но не работают с фиксированным.

HTML:

<div id="header">
   <div id="bandname">Bewolf Photography</div>
   <div id="insta"><img  src="imgs/insta.png" width="40" alt="tablets" /></div>
   <div id="bandname">Bewolf Photography</div>
</div>

CSS для текста и изображения:

#bandname
{
   display: inline-block;
   font-size: 2.8em;
   padding: 0px 0px 0 0;
   vertical-align: middle;
   background: rgba(0, 255, 0, 1);
}

#insta { 
 display: inline-block;
 padding: 0px 0px 0px 50px;
 vertical-align: middle;
}

Я просто не могу понять, что один из них...

Я попытался использовать

   line-height:  6em;

Помощь будет оценена...thanks но это тоже не работает.

Ответ 1

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

#header:before выводит встроенные элементы в центр. Прямым дочерним элементам заголовка присваивается display: inline-block и vertical-align: middle, чтобы сохранить прямую линию.

Подробнее о псевдоэлементах здесь.

Этот метод в основном добавляет "div" перед остальной частью вашего контента. (Он может быть заменен реальным <div>, если вам действительно нужно это работать в IE7 и ниже. [Не беспокойтесь!]). Он в основном выглядит следующим образом:

<div class="header">
  <!-- added by css -->
  <div>I am :before and you will all do as I say! To the middle, plebs!</div>
  <!-- end css content -->

  <div>Yes master!</div>
  <div>Anything you say sir!</div>
</div>

Рабочий пример

Примечание. Я удалил div из изображения. Это кажется ненужным, но может быть возвращено в случае необходимости. Кроме того, я нацелен только на прямых детей #header, используя селектор прямых детей: >. Вот огромный список селекторов CSS.

#header {
  position: fixed;
  height: 6em;
  display: block;
  width: 100%;
  background: rgb(0, 255, 255);
  /* Fall-back for browsers that don't support rgba  */
  background: rgba(0, 255, 255, 1);
  z-index: 9;
  text-align: center;
  color: #000000;
  top: 0px;
}
#header:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
#header > div,
#header > img {
  display: inline-block;
  font-size: 2.8em;
  padding: 0px 0px 0 0;
  vertical-align: middle;
}

<div id="header">
  <div id="bandname">Test</div>
  <img src="http://www.placehold.it/50" width="40" alt="tablets" />
  <div id="bandname">test</div>
</div>

Ответ 2

Вы можете использовать свойства left, right, top и bottom, например, установить em на 50% и использовать свойство transform для translate элемента -50% от себя отлично центрируйте его. Звучит путать, но я сделал скрипку: http://jsfiddle.net/zzztfkwu/ Будет ли это работать?

EDIT: http://jsfiddle.net/kbh97n82/1 обновленная скрипта с помощью решения .wrapper.

Ответ 3

Самое простое решение - иметь для него содержимое css.

#header .wrapper
{
   position: relative;
   top: 50%;
   transform: translateY(-50%);
}

Поскольку существует несколько дочерних элементов, лучше обернуть их вокруг div-оболочки. Вот рабочий пример:

http://jsfiddle.net/zf987w0b/1/