Мне нужно горизонтально центрировать div
внутреннее внутри внешнего на основе этого кода HTML и CSS:
<div class="externo">
<div class="interno">
</div>
</div>
.interno {
background-color: green;
height: 20px;
width: 50%;
}
.externo {
background-color: red;
width: 200px;
padding: 20px;
}
JSFiddle: https://jsfiddle.net/fpvkcrkg/
Используйте автоматические боковые поля.
Вам действительно нужно только поместить их в свои значения
margin-left
иmargin-right
, но в вашем случае, поскольку вам не требуется верхнее и/или нижнее поле, это будет работать именно так, поскольку согласно документации, если вы укажете это таким образом , это будет то же самое, что:То есть верхнее и нижнее равны нулю.
Есть много способов центрировать элементы с помощью CSS , однако одним из самых популярных в прошлом году является использование Flexbox .
При использовании Flexbox контейнеру не нужно иметь какие-либо особые свойства для размещения в пространстве, однако, используя свойства Flexbox для дочерних элементов, вы можете делать вещи, немыслимые с помощью традиционного CSS.
Чтобы узнать больше о Flexbox, я рекомендую вам посетить следующие ссылки:
Если вы ищете решение, которое не включает Flexbox, я рекомендую ознакомиться с Centering in CSS: A Complete Guide . Это абсолютное руководство о том, как центрировать элементы с помощью CSS независимо от того, какой браузер вам нужно поддерживать.
Добавьте
margin:0 auto;
к классуinterno
в CSS, чтобы добиться горизонтального центрирования внутри внешнего divВы можете применить этот CSS к
div
внутреннему:Конечно, вам не нужно устанавливать ширину на 50%. Любая ширина меньше
div
родительской будет работать. Онmargin: 0 auto
то, что делает эгоистичный.Если вы хотите включить IE8+, лучше использовать это:
Это сделает внутренний элемент центрированным по горизонтали и работает без указания конкретной ширины.
Шрифт
jsfiddle
Вы можете использовать flexbox на
div
внешнем.Просто добавляя последнюю строку, она центрируется относительно своего родителя.
Другой способ — использовать преобразование: translateX
Установите внешний div в положение или
relative
, и он должен иметь определенные размеры.absolute
fixed
Во внутреннем div
position: absolute
иleft: 50%
, затем применитеtransform: translateX(-50%)
.Протестировано на:
Примечание. В сочетании с translateY производит центрирование по обеим осям. Вы должны добавить во внутренний div
top: 50%
.Просто добавьте
display: inline-block
внутрь и отцентрируйте его ,<div>
добавив снаружи.text-align: center
<div>
Это будет выглядеть так:
Самый быстрый способ — включить метку в эту часть кода без использования CSS, Flex-Bos или Na De Na… Это делается очень просто:
Самый быстрый способ — включить метку в эту часть кода без использования CSS, Flex-Bos или Na De Na… Это делается очень просто: