Какой наименее ужасный способ центрировать элемент с помощью CSS? - PullRequest
Новая
       13

Какой наименее ужасный способ центрировать элемент с помощью CSS?

21 голосов
/ 16 октября 2011

У меня есть html, который выглядит следующим образом: 

<!DOCTYPE html> 
<head>
    <meta charset="utf-8">

    <!--[if lte IE 8]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head> 

<body>

<header>
  <h1>Some title thing, who knows</h1>
  <nav>
    <ul>
      <li><a href="one/">One</a></li>
      <li><a href="two/">Two</a></li>
      <li><a href="three/">Three</a></li>
    </ul>
  </nav>
</header>

</body>
</html>

Если я даю header автоматическое поле и ширину, он центрируется по горизонтали.Какой наименее ужасный способ обеспечить его вертикальное центрирование?

Мне известны следующие статьи, в которых обсуждается некоторая тема:

Ответы [ 6 ]

12 голосов
/ 16 октября 2011

Поскольку этот вопрос был помечен CSS3, вот «наименее ужасное» решение, использующее «flexbox» CSS3. К сожалению, только последние версии Safari, Chrome и Firefox поддерживают его. 

html, body {
  margin:0;
  padding:0;
  height:100%;
  background:#eee;
}
header {
  width:30em;
  background:#fff;
}
body {  
  display:box;
  box-pack:center;
  box-align:center;
  box-orient:horizontal;
}

Более полную демонстрацию можно найти здесь .

4 голосов
/ 16 октября 2011

Если вы НЕ знаете высоту header, которую я часто использую, требуется дополнительный html, если все сделано правильно, хотя вы и не могли бы обойтись.

Вы делаете заголовок vertical-align: middle, делая его table-cell

html{
    height: 100%;
}      
body {
    display: table;
    height: 100%;
    margin: 0 auto;
    padding: 0;
}
header {
    display: table-cell;
    vertical-align: middle;
}

, отметив, что я установил 100% -ную высоту на html-узле, что на самом деле не соответствует CSS, насколько язнаете, оно должно быть на теле, а заголовок должен быть в инкапсулирующем div, который имеет display: table http://jsfiddle.net/bgYPR/2/

3 голосов
/ 16 октября 2011

К сожалению, все еще ничего элегантного для вертикального выравнивания, только хаки.

2 голосов
/ 16 октября 2011

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

1 голос
/ 16 октября 2011

Обычно, когда мне нужно вертикальное центрирование, я использую пару элементов inline-block.У вас есть один элемент, который является полной высотой контейнера, и второй элемент, который является только высотой содержимого, которое будет центрировано.Они оба display:inline-block;vertical-align:middle.

. Мне нравится использовать теги b для этого, потому что они не имеют смысловой значимости и крошечные: 

<style>
    .mycontainer {text-align:center;}
    b.vcenter {display:inline-block;height:100%;width:1px;vertical-align:middle;}
    b.vcenter+b {display:inline-block;vertical-align:middle;}
</style>

<div class="mycontainer">
    <b class="vcenter"></b><b>This is my centered content<br>It makes me happy!</b>
</div>

Имейте в виду, этот конкретный пример кода не будет работать вIE7 из-за отсутствия селекторов inline-block и sibling (+), но тот же метод может быть реализован с использованием более сложного кода, который будет обрабатывать IE7.

0 голосов
/ 16 октября 2011

Я бы обычно не центрировал по вертикали, но указал бы небольшое верхнее поле, например 20px.Мы не всегда знаем достаточно об оборудовании конечного пользователя, чтобы сделать предположение о том, что удобно или пригодно для платформы, на которой он просматривает сайт.

...