Как лучше всего центрировать элемент html внутри содержащего его элемента?

Допустим, у вас есть следующий фрагмент кода:

<div id = "container">
  <someelement>This is any element.</someelement>
</div>

Какой лучший CSS я мог бы использовать для горизонтального центрирования "someelement" внутри содержащего его div?

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
5
0
2 593
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Пытаться

<someelement style = "margin-left:auto;margin-right:auto">This is any element</someelement>

У JaredPar правильная идея, но вот более чистый способ сделать то, что вы ищете;)

#container {
    text-align: center;
}

#container someelement {
    margin: 0 auto;
    text-align: left;
}

Почему 0 авто против авто? Не фанат CSS, поэтому очевидное может быть ответом

JaredPar 28.12.2008 01:45

Джаред: 0 auto чище, чем делать margin-left / margin-right отдельно. Функционально они такие же (по крайней мере, я уверен на 99%).

MattBelanger 28.12.2008 02:06

0 - для верхнего и нижнего полей и автоматически для левого и правого полей.

allesklar 28.12.2008 02:25
Ответ принят как подходящий

если ваш <someelement> является встроенным элементом (т.е. по умолчанию display: inline), примените text-align: center к его контейнеру. Если <someelement> является блочным элементом, установите для левого и правого поля значение auto и не забудьте установить ширину (по умолчанию блочные элементы занимают все доступное горизонтальное пространство, если ширина не указана явно). Возможно, вам придется использовать оба метода, если вы хотите, чтобы они работали и в IE 5.5 и ниже.

Другие вопросы по теме