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

ProgramBox

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

Post author:admin
Запись опубликована:5 февраля, 2023
Post category:Вопросы по программированию

#css #vertical-alignment

#css #вертикальное выравнивание

Вопрос:

У меня есть 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 автоматическое поле и ширину, оно центрируется по горизонтали. Какой наименее ужасный способ гарантировать, что он также центрирован по вертикали?

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

1. Это день противоположностей или что-то в этом роде? Почему бы просто не сказать «лучший»?

2. Нет, сегодня не день противоположностей. Я имею в виду это как своего рода формальное заявление, выражающее мое разочарование в работе с CSS. В частности, вопрос, который вызвал тысячи сообщений в блогах за десятилетие, должен иметь простой ответ, по крайней мере, в спецификации CSS3. Я буду приятно удивлен, если получу ответ на этот вопрос, который прост и не требует загрязнения разметки. Таким образом, я смотрю на «наименее ужасный» ответ.

3. Я часто удивляюсь полному отсутствию поддержки элегантного вертикального выравнивания в CSS. Невероятно, как комитет по стандартам мог не учитывать такую важную вещь.

4. Имейте в виду, что в некоторых случаях вертикальное центрирование на самом деле не имеет значения, и достаточно большое верхнее поле будет в самый раз. Не корите себя за это слишком сильно, пока не убедитесь, что это действительно жизненно важно.

5. @Matchu Конечно; Я думаю, я бы зашел так далеко, что утверждал, что просто искажение вертикального центрирования с большим запасом является одним из «ужасных» решений поставленной проблемы.

Ответ №1:

Поскольку этот вопрос был помечен 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;
}

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

Ответ №2:

Если вы НЕ знаете высоту 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 /

1. Других стилей, кроме того, который вы видите в html, нет.

2. @troutwine: должна быть определена хотя бы ширина, иначе margin:0 auto не было бы никакого заметного эффекта.

3. Конечно, в моем CSS определена ширина, и я упоминаю об этом. Но я пытаюсь предложить вам поделиться небольшим кодом. Для целей этого вопроса есть только html-код. Итак, какой наименее ужасный способ получить этот header привкус в середине страницы?

Ответ №3:

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

Ответ №4:

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

1. Использовал эту статью в прошлый раз, когда у меня была проблема. Кажется, он охватывает все возможные способы сделать это.

2. В блогах так много сообщений с «решениями», зависящими от контекста, что вы можете подавиться ими. Да, метод 3 этого парня выглядит неплохо, но для его завершения требуется 4 шага и плавающий div. У меня нет плавающего элемента, только заголовок. Также есть это и любое количество других сообщений, которые вы можете найти в Google «вертикальный центр css». Должно быть что-то авторитетное. Если нам нужно собраться вместе и заламывать руки над контекстом, инструмент сломан .

Ответ №5:

Обычно, когда мне нужно вертикальное центрирование, я использую пару встроенных блочных элементов. У вас есть один элемент, который равен полной высоте контейнера, а второй элемент — это только высота содержимого, которое нужно центрировать. Оба являются 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 из-за отсутствия встроенных блоков и селекторов ( ), но тот же метод можно выполнить с использованием более сложного кода, который будет обрабатывать IE7.

1. Спасибо. Не могли бы вы быть так любезны, чтобы настроить свой ответ на представленный HTML-код — отредактировав его по мере необходимости — а также будьте достаточно любезны, чтобы включить функциональность IE7?

2. Я не понял, что именно вы пытались центрировать. Весь тег заголовка? Заголовок будет единственным в документе? Код IE7 требует знания точных размеров содержимого, поскольку ширина и высота блока содержимого должны быть определены.

3. Кроме того, IE7 не поддерживает тег заголовка изначально без добавления прокладки и css по умолчанию, которые вы не показываете.

4. Да, для этого поста заголовок является единственным содержимым страницы. Кроме того, тонкое замечание об этой заточке: я пошел дальше и отредактировал верхний пост, чтобы включить заточку html5.

Ответ №6:

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

1. OP спрашивает о вертикальном центрировании… так почему вы говорите о горизонтальном центрировании, полях в 20 пикселей и не знаете об оборудовании пользователя? На самом деле это не имеет смысла, поскольку «центрирование» чего-либо обычно является динамическим решением, которое полностью не зависит от какого-либо конкретного размера экрана. (в этом суть) … Он компенсирует автоматически.

2. По сути, взрыв мобильных устройств / браузеров / интернет-телевизоров / широкоэкранных соотношений очень затрудняет понимание того, какие (даже хорошо зарекомендовавшие себя) методы взлома приведут к странным результатам в дикой природе. Недавно я исправил сайт, который использовал технику, предложенную Бенджамином ранее, но показывал очень странные результаты в разных мобильных браузерах. Может случиться так, что V-образный центр очень хорошо работает с точки зрения дизайна и удобства использования на настольном компьютере или мобильном устройстве, но оказывается плохим для удобства использования на мобильной сенсорной платформе.

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

4. Просмотр с мобильных устройств очень популярен. Это настолько популярно, что мобильные браузеры становятся все более похожими на настольные браузеры… пока, но не настолько популярный, что большинству обычных владельцев веб-сайтов даже нужно беспокоиться об этом. Если мобильная платформа критически важна для вашей бизнес-модели, создайте для нее приложение.

5. Зависит от вашего опыта, я думаю, я работаю в цифровом агентстве и вижу проблемы с «взломами для внешнего вида», подобными этому, довольно еженедельно. Владельцам веб-сайтов следует ОЧЕНЬ беспокоиться об этом, потому что они будут жить со своим текущим выбором в течение довольно долгого времени. Также проблема, которую я выделил, касалась не только кода, но и удобства использования. То, что отлично смотрится и удобно работает на традиционных дисплеях, может быть не таким успешным на других.