Центрирование блока по горизонтали css: Центрирование в CSS: полное руководство

Содержание

Контейнеры Flex: центрирование по вертикали и растягивание размеров

Контейнеры Flex очень плотно заняли свою позицию в верстке веб-страниц. В верстку они пришли лишь пару лет назад, но каждый уважающий себя верстальщик о них уже точно знает. Они принесли с собой новые возможности обработки отдельных HTML-элементов страницы.

Если попытаться объяснить простым языком, то технология Flexbox с легкостью решает некогда сложные задачи, а именно:

  • выравнивает элементы по вертикали;

  • прижимает подвал внизу экрана;

  • ставит блоки в один ряд, чтобы они заняли все свободное пространство;

  • растягивает блоки по высоте и ширине;

  • помогает создать адаптивную верстку.

Эти задачи решаются и без flex-контейнеров, но тогда это происходит какими-то сложными и обходными путями при помощи «костылей» (когда используются свойства CSS не по назначению).

Flexbox же все это делает так, как задумано, — просто и легко.

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

 

Flex центрирование по вертикали и горизонтали

Отцентровать элементы на странице, особенно по вертикали, раньше было очень сложно. Для это приходилось искать разнообразные хаки. Но flexbox существенно упростил эту задачу, поэтому теперь можно тратить свои силы и энергию на другие задачи по проекту.

 

Flex центрирование по горизонтали

Осуществляется все очень просто. Допустим, у нас есть некий div, который содержит 2 каких-нибудь элемента, которые мы хотим центровать по горизонтальной оси. Для этого нужно будет всего-то использовать CSS-свойство justify-content.

Пример нашего div:

<div class=“boxFlex“>

    <p> Первый элемент блока</p>

     <p> Второй элемент блока</p>

</div>

 

Пример нашего CSS:

. boxFlex {

display: flex;

justify-content: center;

}

 

Далее могут идти другие CSS-свойства.

Помимо центрирования, justify-content может приобретать следующие значения:

  • flex-start — все элементы располагаются в начале flexbox, это значение по умолчанию;

  • flex-end — элементы располагаются в конце flexbox;

  • space-between — элементы располагаются в одной линии с равными промежутками между собой, но без промежутков в начале и в конце контейнера;

  • space-around — элементы располагаются с промежутками между собой, а также с промежутками в начале и в конце контейнера;

  • initial — придает элементам значения по умолчанию;

  • inherit — придает элементам значение родительского элемента.

 

Flex центрирование по вертикали

За центрирование по вертикали отвечает CSS-свойство align-items. Допустим, мы к нашим описанным выше блокам еще хотим применить flex центрирование по вертикали. Тогда у нас получится следующий CSS-код:

.boxFlex {

display: flex;

justify-content: center;

align-items: center;

}

 

Помимо центрирования, CSS свойство align-items может приобретать значения: flex-start, flex-end, initial, inherit, как и при горизонтальном выравнивании, только ориентируясь на вертикальное выравнивание, а также несколько собственных значений:

  • stretch — это значение по умолчанию, когда элементы расположены по всему размеру flexbox; кстати, это значение используют, когда нужно при помощи CSS, используя flex, растянуть элемент по высоте контейнера;

  • baseline — элементы располагаются в базовой линии flexbox.

 

Заключение

Flexbox — довольно простая технология со множеством различных настроек элементов контейнера. Мы показали лишь flex центрирование элементов по вертикали и горизонтали. А также то, что, используя CSS-свойство align-items: stretch, можно растянуть элемент по высоте контейнера. Но это лишь капля в море того, на что способна технология flexbox. Потому что она способна создать по-настоящему адаптивную верстку вашей HTML-страницы.

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

спросил

Изменено 1 год, 7 месяцев назад

Просмотрено 76 тысяч раз

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

 -----------------------------------------
| _____ _____ |
| | | | | |
| | фу | | бар | |
| |_____| |_____| |
|_________________________|
 

Однако с моим неработающим кодом в настоящее время он выглядит так:

 ------------
| _____ ____ |
|| | | | |
|| фу | | бар | |
||_____| |_____| |
|_________________________|
 

HTML

 
 

CSS

 раздел {
 отображение: встроенный блок;
 набивка: 1em;
 поле: 1em;
 граница: 1px сплошной черный;
}
 

Причина, по которой два якоря должны быть встроенными, а не просто встроенными, заключается в том, что я не хочу, чтобы отступы и поля якоря перекрывались.

0

Просто установите text-align: center; в контейнере div.

3

Установить text-align: center; для родительского элемента.

Вы пробовали следующее?

 раздел{
   выравнивание текста: по центру;
}
 

Либо вы можете попробовать эти

 div{
   выравнивание текста: по центру;
}
 

или установите поля автоматически, как показано ниже

 div a{
  поля:авто;
  поле слева: 1em;
  поле справа: 1em;
  верхняя граница: 1em;
  нижняя граница: 1em;
 дисплей: встроенный блок;
}
 

Здесь показан хороший пример

1

Просто для ясности…

 
....

не работает с элементами разной ширины, но

 
<дел> ....

делает

Я использовал text-align: "center" в родительском контейнере, и это центрировало UL на странице, но также центрировало текст в UL (не желательно). Поэтому я добавил text-align: "left" к

    , чтобы текст был рядом с
    стиль списка
    .

    Вы также можете сделать

     .div {
        дисплей: встроенный блок по центру;
        выравнивание текста: по центру;
    }
     

    , чтобы расположить встроенный блок по центру по горизонтали!

    Зарегистрируйтесь или войдите в систему

    Зарегистрируйтесь с помощью Google

    Зарегистрироваться через Facebook

    Зарегистрируйтесь, используя адрес электронной почты и пароль

    Опубликовать как гость

    Электронная почта

    Требуется, но не отображается

    Опубликовать как гость

    Электронная почта

    Требуется, но не отображается

    Как горизонтально центрировать кнопку в CSS

    С помощью CSS (каскадных таблиц стилей) вы можете придать веб-странице HTML наилучший вид. Каждый элемент на странице можно упорядочить любым удобным для вас способом с помощью CSS. Горизонтально и вы можете использовать вертикально выровненные элементы. Кнопки CSS должны быть выровнены по центру, если их нужно разместить в центре веб-страницы или внутри блока div.

    Прежде чем мы продолжим, мы хотели бы поблагодарить komik.dk за помощь в создании этого руководства.

    Используйте следующую процедуру для выравнивания по центру кнопки CSS.

    Center: Text-align — просто изменив text-align на center из свойства тега div.

    margin: auto — выбрав опцию auto margin в окне свойств

    position: fixed — установив для атрибута position значение fixed отобразить сетку, выбрав атрибут отображения для сетки.

    1. Центрируя атрибут text-align тега body (text-align: center)

    В этом примере мы используем центральный атрибут text-align тега body>, который автоматически центрирует все внутри.

    2. Центрируя атрибут text-align родительского тега div (text-align: center)

    В приведенном ниже примере мы используем свойство center text-align для элемента div> с классом (button-container-div), чтобы гарантировать, что все, что включено в этот div>, автоматически выравнивается по центру.

    3. Используя свойство margin auto, отцентрируйте кнопку CSS (Margin: auto)

    Мы используем автоматическое свойство Margin. Margin автоматически центрирует div на экране.

    4. Используйте кнопку CSS с фиксированным положением, чтобы центрировать ее.

    В этом примере мы устанавливаем 50% поля с левой стороны страницы, а затем используем position: fixed, чтобы центрировать текст.

    5. Указав свойство flex для свойства display (display: flex)

    В этом примере мы применяем свойство flex display, а также свойства justify-content и align-items ,’ в родительский тег div> с классом (button-container-div). Кнопка, содержащаяся в div>, будет центрирована как по вертикальной, так и по горизонтальной осям.

    Justify-content центрирует кнопку по горизонтали.

    Центр выравнивания предметов держит его посередине; в противном случае он начнется в верхней части div и будет двигаться вниз.

    Как центрировать кнопку по горизонтали в CSS

    Это может быть немного сложно, но вот несколько быстрых способов центрирования кнопки независимо от типа элемента.

    Выравнивание элементов по центру

    Чтобы центрировать блочный элемент по горизонтали (например, div>), используйте margin: auto;

    Установка ширины элемента предотвращает его расширение за пределы его контейнера.

    Затем элемент заполнит требуемую ширину, оставив равное пространство между двумя полями:

    Этот элемент div занимает центральное положение.

    Элемент кнопки со встроенным блоком

    По умолчанию элементы кнопки и ссылки настроены на отображение: встроенный блок. Вы заключите часть с встроенным блоком, установленным в пределах обычного потока документа слева направо на странице.

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

    Это сравнимо с элементами display: inline set, за исключением того, что элементы inline-block могут контролировать свою высоту и ширину, но не встроенные элементы.

    Использование text-align: center для центрирования текста

    Установив text-align: center для родительского элемента, вы можете центрировать встроенные блочные (и встроенные) элементы.

    Наш элемент button> заключен в div> с text-align: center set.

    С фиксированной шириной, это элемент блочной кнопки.

    Text-align: center нельзя использовать для центрирования блочных компонентов, поскольку по умолчанию они имеют полную ширину, если не задана статическая ширина.

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

    Предположим, у нас есть кнопка шириной 200 пикселей. Несмотря на то, что он имеет ширину всего 200 пикселей, он не позволяет размещать какие-либо дополнительные элементы рядом.

    Вы можете центрировать блочный элемент, установив для полей слева и справа значение авто. Для этого мы можем использовать сокращение margin: 0 auto. (При этом также обнуляются значения margin-top и margin-bottom.)

    Использование flexbox для центрирования

    Кроме того, вы можете использовать flexbox для центрирования как встроенных, так и блочных элементов.

    Поместите кнопку в родительский элемент div> и сделайте ее видимой: центрируйте сгибание и выравнивание содержимого.

    Настройки flexbox позволяют центрировать кнопку по горизонтали и вертикали. Мы можем центрировать элемент кнопки по горизонтали, используя свойство CSS align-items с центром значения. В то же время мы можем использовать CSS-свойство justify-content в сочетании с центром значения для вертикального центрирования элемента кнопки.

    Чтобы центрировать элемент кнопки по горизонтали и вертикали, мы должны предоставить свойства CSS justify-content и align-items в дополнение к центру значения.

    Использование свойства преобразования CSS

    Помимо свойства flexbox, мы также можем использовать набор свойств CSS для выравнивания кнопки по центру по горизонтали и вертикали. Добавьте относительные и абсолютные позиции в класс контейнера и класс, содержащий кнопку. Теперь, используя left:50% и top:50%, отцентрируйте кнопку в контейнере. Кроме того, используйте преобразование: перевод (-50 процентов, -50 процентов).

    Две кнопки рядом друг с другом

    Иногда вам может понадобиться две кнопки рядом друг с другом, но по центру страницы.

    Этого можно добиться, заключив обе кнопки в родительский элемент div> и отцентрировав их на странице с помощью flexbox.

    Примечательно, что мы добавили поле margin-right: 20px к первой кнопке, чтобы разделить их.

    Использование моделей CSS flexbox и grid для центрирования кнопки

    Кроме того, вы можете центрировать элемент кнопки, изменив режим отображения элемента-контейнера на flex или grid и добавив к нему свойство justify-content: center.

    Например, если вы используете div> в качестве контейнера для элемента button>, это правило CSS будет центрировать недовольство > по горизонтали:

    .center-h {

    display: flex; /* или display:grid */

    justify-content: center;

    }

    Преимущество использования архитектуры flexbox или grid CSS заключается в том, что вы можете центрировать содержимое по вертикали и по горизонтали.