Попытка центрировать div внутри контейнера div

0

Вот мой CSS:

#main {
  background: #eae8dc;
  margin: 0 auto;
  width: 790px;
  height: 900px;
  position: relative;
  display: block;
}
#header-container {
  display: inline-block;
  height: 118px;
  width: 648px;
  background: #9ed5de;
  margin: 11px auto;
}

Здесь HTML

<div id="main">
   <header>
     <h1 id="header-container">
     </h1>
   </header>
</div>

Этот вопрос был полезен для исправления моей проблемы с марже, но теперь я не могу сосредоточиться на контейнере заголовка. Почему этот CSS-верхний стиль не работает?

Теги:
center

2 ответа

2
Лучший ответ

Text-align должен помочь вам в центре:

#main {
  background: #eae8dc;
  margin: 0 auto;
  width: 790px;
  height: 900px;
  position: relative;
  display: block;
   text-align: center;
}
#header-container {
  display: inline-block;
  height: 118px;
  width: 648px;
  background: #9ed5de;
  margin: 11px auto;
}

Здесь сценарий JS http://jsfiddle.net/RBkmv/

Поделиться
  • 0
    CSS настолько не интуитивно понятен :(. Спасибо, это определенно сработало, но будет ли он центрировать каждый элемент внутри #main? Я хотел бы избежать этого, если это возможно
  • 0
    Да, так и будет - если это не то, что вы хотите, вам нужно переосмыслить свой подход или полагаться на 50% левое поле, что не рекомендуется
Показать ещё 2 комментария
1

Это плохая практика. Вы должны header элемент header а не элемент h1. См. Пример

#main {
  background: #eae8dc;
  margin: 0 auto;
  width: 790px;
  height: 900px;
  position: relative;
  display: block;
   text-align: center;
}
header {
  display: inline-block;
  height: 118px;
  width: 648px;
  background: #9ed5de;
  margin: 11px auto;
}

Таким образом, ваш CSS-код работает.

Поделиться
  • 0
    Ваш JSFiddle все еще имеет его на H1
  • 0
    Нет, стиль для элемента заголовка.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню