Как разместить div по центру: Выравниваем блок по центру страницы / Хабр

Как расположить div по центру css

CSS — Выравнивание по центру

В CSS некоторые на первый взгляд простые вещи оказывается не так-то просто выполнить. Одной из таких вещей, является выравнивание, т.е. когда один элемент необходимо расположить определённым образом относительного другого.

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

Примечание: под каждым решением приведен список браузеров с указанием версий, в которых указанный CSS код работает.

CSS — Выравнивание блока по центру

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

Браузеры, которые поддерживают данное решение:

• Chrome 4.0+
• Firefox 3.6+
• Internet Explorer 9+
• Opera 10.5+
• Safari 3.1+

2. Выравнивание одного блока по центру другого. При этом второй блок имеет фиксированные размеры.

Браузеры, которые поддерживают данное решение:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 4.0+
• Opera 7.0+
• Safari 1.0+

3. Выравнивание одного блока по центру другого. При этом второй блок имеет размеры, заданные в процентах.

Браузеры, которые поддерживают данное решение:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 4.0+
• Opera 7.0+
• Safari 1.0+

CSS — Выравнивание по горизонтали

1. Выравнивание одного блочного элемента ( display: block ) относительно другого (в котором он расположен) по горизонтали:

Браузеры, которые поддерживают данное решение:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 6.0+
• Opera 3.5+
• Safari 1.0+

2. Выравнивание строчного ( display: inline ) или строчно-блочного ( display: inline-block ) элемента по горизонтали:

Браузеры, которые поддерживают данное решение:

• Chrome 1. 0+
• Firefox 3.0+
• Internet Explorer 8.0+
• Opera 7.0+
• Safari 1.0+

CSS — Выравнивание по вертикали

1. Отцентровать один элемент ( display: inline , display: inline-block ) относительно другого (в котором он расположен) по центру. Родительский блок в этом примере имеет фиксированную высоту, которая задаётся с помощью свойства CSS line-height .

Браузеры, которые поддерживают данное решение:

• Chrome 1.0+
• Firefox 3.0+
• Internet Explorer 8.0+
• Opera 7.0+
• Safari 1.0+

2. Центрирования одного блока относительно другого по вертикали посредством представления родителя как таблицы, а ребёнка как ячейки этой таблицы.

Браузеры, которые поддерживают данное решение:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 8.0+
• Opera 7.5+
• Safari 1.0+

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

Как расположить div по центру css

Способов выравнивания блоков довольно много. Каждый выбирает для себя более привычный. Я опишу 5 способов, выбирайте наиболее подходящий.

1. Самый простой способ – с использованием стиля margin:10px auto 5px;
   Его можно применять для выравнивания одного блока. Два и более блока в этом случае будут располагаться вертикально.

   стиль:
   .blk1 < /* выравнивание блоков по центру */
   margin:10px auto 5px;

/* эти стили на выравнивание не влияют */
width: 400px;
background-color:#CCC;
border: 1px solid #999;
padding: 20px;
>
Код HTML-смтраницы:

<div > Содержание блока 1. Текст, текст, … </div>
<div > Содержание блока 2. Текст, текст, … </div>

1. Процентный способ выравнивания. Его использовать можно тогда, когда ширина блока задана в процентах. Принцип в том, что если ширина блока 60%, то на отступы слева и справа остается 40% (по 20% с каждой стороны). В этом случае можно для этих блоков применять стиль:

margin:5px 20% 10px 20%;

width:60%;
Код страницы аналогичен предыдущему способу.

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

1. Смешанный способ выравнивания блока по центру: left: 50%;
   margin-left: -500px;
   position: absolute; Это не самый лучший, т.к. имеет ряд недостатков:

1. выравнивание получается не совсем по центру;
2. при использовании двух и более блоков на странице виден только последний, т.к. стиль position: absolute; (абсолютное позиционирование) ставит все блоки в одно место.

1. С использованием родительского блока. Метод предполагает использование одного дополнительного общего блока, внутри которого помещаются выравниваемые блоки.
   В этом случае HTML-код страницы:

<div >
<div > Содержание блока 1. Текст, текст… </div>
<div > Содержание блока 2. Текст, текст… </div>
… ниже дополнительные блоки (при необходимости) …
<div > Содержание блока 3. Текст, текст… </div>
<div > Содержание блока 4. Текст, текст… </div>
<div > Содержание блока 5. Текст, текст… </div>
</div>

Стили для этих блоков:

.dop-block <
position: relative;
float: right;
right: 50%;
>
.blk4 <
position: relative;
float: left;
left: 50%;

/* эти стили на выравнивание не влияют */
margin: 5px;
background-color:#CCC;
width:400px;
border: 1px solid #999;
padding: 20px;
>

Если блоков в странице не много, т. е. они помещаются в одну строку, то выравнивание для них работает:

Главный недостаток — когда блоков много и они не помещаются в 1 ряд, то выравнивание блоков по центру перестает работать:

1. С использованием стиля text-align: center; в родительском блоке и стиля display: inline-block; в дочерних. Тогда HTML-код страницы:

<div >
<div > Содержание блока 1. Текст, текст… </div>
<div > Содержание блока 2. Текст, текст… </div>
… ниже дополнительные блоки (при необходимости) …
<div > Содержание блока 3. Текст, текст… </div>
<div > Содержание блока 4. Текст, текст… </div>
<div > Содержание блока 5. Текст, текст… </div>
</div> Стили для этих блоков:

.dop-block <
text-align: center;
>

.blk5 <
display: inline-block;

/* дополнительный стиль для вытавнивания текста внутри блока */

text-align:left;

/* эти стили на выравнивание блоков не влияют */
margin: 5px;
background-color:#CCC;
width:400px;
border: 1px solid #999;
padding: 20px;

Страница в этом варианте будет выравнивать блоки даже если их общая длинна превышает ширину окна браузера:

Не все способы описаны. Если вы считаете, что есть еще более удобный способ, напишите.

Выравниваем блок по центру страницы

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

Ниже представлены основные способы решения задачи, их плюсы и минусы. Чтобы понимать суть примеров, рекомендую уменьшить высоту / ширину окошка Result в примерах по указанным ссылкам.

Вариант 1. Отрицательный отступ.

Позиционируем блок атрибутами top и left на 50%, и заранее зная высоту и ширину блока, задаём отрицательный margin, который равен половине размера блока. Огромным минусом данного варианта является то, что нужно подсчитывать отрицательные отступы. Так же блок не совсем корректно ведёт себя в окружении скроллбаров — он попросту обрезается так как имеет отрицательные отступы.

Вариант 2. Автоматический отступ.

Менее распространённый, но схожий с первым. Для блока задаём ширину и высоту, позиционируем атрибутами top right bottom left на 0, и задаём margin auto. Плюсом данного варианта являются рабочие скроллбары у родителя, если у последнего задана 100% ширина и высота. Минусом данного способ является жёсткое задание размеров.

Вариант 3. Таблица.

Задаём родителю табличные стили, ячейке родителя устанавливаем выравнивание текста по центру. А блоку задаём модель строчного блока. Минусами мы получаем не рабочие скроллбары, и в целом не эстетичность «эмуляции» таблицы.

Чтобы добавить скролл в данный пример, придётся добавить в конструкцию ещё один элемент.
Пример: jsfiddle.net/serdidg/fk5nqh52/3.

Вариант 4. Псевдо-элемент.

Данный вариант лишён всех проблем, перечисленных у предыдущих способов, а так же решает первоначально поставленные задачи. Суть состоит в том, чтобы у родителя задать стили псевдо-элементу before, а именно 100% высоту, выравнивание по центру и модель строчного блока. Так же само и у блока ставится модель строчного блока, выравнивание по центру. Чтобы блок не «падал» под псевдо-элемент, когда размеры первого больше чем родителя, указываем родителю white-space: nowrap и font-size: 0, после чего у блока отменяем эти стили следующими — white-space: normal. В данном примере font-size: 0 нужен для того, чтобы убрать образовавшийся пробел между родителем и блоком в связи с форматированием кода. Пробел можно убрать и иными способами, но лучшим считается просто его не допускать.

либо, если вам нужно, чтобы родитель занимал только высоту и ширину окна, а не всей страницы:

Вариант 5. Flexbox.

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

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

Вариант 6. Transform.

Подходит в случае если мы ограничены структурой, и нет возможности манипулировать родительским элементом, а блок выровнять как-то нужно. На помощь придёт css функция translate() . При значение 50% абсолютное позиционирование расположит верхний левый угол блока точно по центру, затем отрицательное значение translate сдвинет блок относительно своих собственных размеров. Учтите, что могут всплыть негативные эффекты в виде размытых граней или начертания шрифта. Также подобный способ может привести к проблемах с вычислением положения блока с помощью java-script’а. Иногда для компенсации потери 50% ширины из-за использования css свойства left может помочь заданное у блока правило: margin-right: -50%; .

Вариант 7. Кнопка.

Пользователь azproduction предложил вариант, где блок обрамляется в тег button. Кнопка имеет свойство центрировать всё, что находится у неё внутри, а именно элементы строчной и блочно-строчной (inline-block) модели. На практике использовать не рекомендую.

Как разместить div по центру страницы

Выравниваем блок по центру страницы

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

Ниже представлены основные способы решения задачи, их плюсы и минусы. Чтобы понимать суть примеров, рекомендую уменьшить высоту / ширину окошка Result в примерах по указанным ссылкам.

Вариант 1. Отрицательный отступ.

Позиционируем блок атрибутами top и left на 50%, и заранее зная высоту и ширину блока, задаём отрицательный margin, который равен половине размера блока. Огромным минусом данного варианта является то, что нужно подсчитывать отрицательные отступы. Так же блок не совсем корректно ведёт себя в окружении скроллбаров — он попросту обрезается так как имеет отрицательные отступы.

Вариант 2. Автоматический отступ.

Менее распространённый, но схожий с первым. Для блока задаём ширину и высоту, позиционируем атрибутами top right bottom left на 0, и задаём margin auto. Плюсом данного варианта являются рабочие скроллбары у родителя, если у последнего задана 100% ширина и высота. Минусом данного способ является жёсткое задание размеров.

Вариант 3. Таблица.

Задаём родителю табличные стили, ячейке родителя устанавливаем выравнивание текста по центру. А блоку задаём модель строчного блока. Минусами мы получаем не рабочие скроллбары, и в целом не эстетичность «эмуляции» таблицы.

Чтобы добавить скролл в данный пример, придётся добавить в конструкцию ещё один элемент.
Пример: jsfiddle.net/serdidg/xkb615mu.

Вариант 4. Псевдо-элемент.

Данный вариант лишён всех проблем, перечисленных у предыдущих способов, а так же решает первоначально поставленные задачи. Суть состоит в том, чтобы у родителя задать стили псевдо-элементу before, а именно 100% высоту, выравнивание по центру и модель строчного блока. Так же само и у блока ставится модель строчного блока, выравнивание по центру. Чтобы блок не «падал» под псевдо-элемент, когда размеры первого больше чем родителя, указываем родителю white-space: nowrap и font-size: 0, после чего у блока отменяем эти стили следующими — white-space: normal. В данном примере font-size: 0 нужен для того, чтобы убрать образовавшийся пробел между родителем и блоком в связи с форматированием кода. Пробел можно убрать и иными способами, но лучшим считается просто его не допускать.

либо, если вам нужно, чтобы родитель занимал только высоту и ширину окна, а не всей страницы:

Вариант 5. Flexbox.

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

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

Вариант 6. Transform.

Подходит в случае если мы ограничены структурой, и нет возможности манипулировать родительским элементом, а блок выровнять как-то нужно. На помощь придёт css функция translate() . При значение 50% абсолютное позиционирование расположит верхний левый угол блока точно по центру, затем отрицательное значение translate сдвинет блок относительно своих собственных размеров. Учтите, что могут всплыть негативные эффекты в виде размытых граней или начертания шрифта. Также подобный способ может привести к проблемах с вычислением положения блока с помощью java-script’а. Иногда для компенсации потери 50% ширины из-за использования css свойства left может помочь заданное у блока правило: margin-right: -50%; .

Вариант 7. Кнопка.

Пользователь azproduction предложил вариант, где блок обрамляется в тег button. Кнопка имеет свойство центрировать всё, что находится у неё внутри, а именно элементы строчной и блочно-строчной (inline-block) модели. На практике использовать не рекомендую.

Выравнивание слоя по центру

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

Когда речь идет об использовании слоев, то для выравнивания в нашем распоряжении имеется несколько способов — с помощью отступов, через позиционирование, а также используя атрибут align тега <div> .

Использование отступов

Если добавить отступ к слою слева с помощью свойства margin-left , то визуально слой сместится на указанное значение вправо. Зная ширину слоя, его можно сместить так, чтобы слой располагался по центру веб-страницы. Для чего от 100%, составляющих общую доступную ширину, надо отнять ширину слоя в процентах и полученное значение разделить пополам. Результат и будет значением свойства margin-left (пример 1).

Пример 1. Использование margin-left

Как вариант, можно не указывать ширину, а регулировать ее с помощью отступа слева и справа (пример 2).

Пример 2. Использование отступов

В данном примере показано размещение слоя шириной 40% по центру. Хотя сама ширина никак напрямую не задается, она определяется значением свойств margin-left и margin-right . Они устанавливают отступ слева и справа, чтобы слой располагался по середине, их значения должны быть равны.

Следующий способ более универсален и уже не зависит от того, какие единицы измерения используются для установки ширины. Для этого требуется задать отступ слева и справа для слоя равным auto через стилевые свойства margin-left и margin-right или универсальное свойство margin (пример 3).

Пример 3. Применение значения auto

В данном примере ширина слоя устанавливается 400 пикселов и выравнивается по центру с помощью значения 0 auto свойства margin . Первый аргумент устанавливает нулевой отступ одновременно сверху и снизу от слоя, а второй аргумент выравнивает слой по центру горизонтали окна браузера.

Атрибут align тега <div>

Еще один способ размещения по центру вообще не требует использования никаких стилей и связан с атрибутом align тега <div> . Указывая значение center , заставляем содержимое слоя выравниваться по его центру. Поэтому необходимо создать два слоя, один из которых будет служить контейнером для другого, как показано в примере 4.

Пример 4. Атрибут align

Опять же, как и в случае использования свойства text-align , размещаться по центру будет и текст внутри слоя. Поэтому следует насильно задать ему необходимое выравнивание через стили. Ширину слоя-контейнера задавать не требуется, она будет вычисляться автоматически и занимать все доступное пространство веб-страницы.

Абсолютное позиционирование слоя

При абсолютном позиционировании координаты слоя вычисляются относительно левого верхнего угла окна родительского элемента или браузера, если родителя нет. Слой, заданный с абсолютным позиционированием, может располагаться под основным текстом или, наоборот, поверх него. Положение определяется с помощью стилевого свойства z-index и позволяет гибко управлять положением слоя по условной z-оси. Таким способом удобно выводить на веб-странице различные подсказки, всплывающие окна, рекламу или плавающие меню.

Вначале следует указать ширину и высоту слоя с помощью width и height . Размеры можно задавать в пикселах, процентах или других единицах. Ширину, например, можно определить в процентах, а высоту в пикселах. Из-за этой особенности предлагаемый метод размещения по центру является наиболее универсальным.

Следующий шаг — задаем абсолютное позиционирование слоя через position: absolute . Положение слоя следует определить как 50% по горизонтали и вертикали с помощью свойств left и top . Эти значения остаются неизменными, независимо от используемых единиц измерения.

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

Чтобы высота слоя не менялась из-за его контента, включен overflow: auto , он добавляет полосы прокрутки, если в них возникнет нужда, высота при этом остается неизменной (пример 5).

Пример 5. Ширина слоя в пикселах

В случае использования процентной записи стиль меняется незначительно, надо так же поделить ширину и высоту пополам и добавить полученные значения в качестве аргументов к свойствам margin-left и margin-top (пример 6). При этом надо учитывать, что видимая ширина элемента складывается из значений width , padding и border .

Пример 6. Ширина слоя в процентах

Ширина и высота слоя напрямую связана с отступами слева и сверху, если требуется установить значение одного из параметров в процентах, соответственно, поменяется и запись другого параметра. Как показано в данном примере, ширина слоя установлена в 40%, следовательно, и для свойства margin-left также надо применить проценты, в данном случае, 20%.

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

Как выровнять блок-контейнер по центру страницы

Как выровнять блок .container по центру <body> независимо от ширины страницы?

Можно использовать Grid Layout или Flex Layout, но прежде убедитесь, что требование заказчика позволяет использовать эти технологии. Для этого есть хороший сайт: Can I use. . Удачи!

UPD: Исправил пример. Подумал что нужно просто центрировать элемент по оси: X. Если все же нужно просто центрировать элемент: container по оси: X, то задайте свойства: margin: 0 auto; , и пропишите свою ширину, ибо это блочный элемент, и он по ширине занимает всё допустимое пространство.

Html как сделать ссылку по центру : Радиосхема.ру

Я действительно Новичок в HTML и мне было интересно, как вы центрируете несколько ссылок с html?

Но проблема заключается в том, когда я пытаюсь поставить за ним другие ссылки, например:

Он просто помещает их на отдельные линии. Я считаю, что это происходит из-за

function. but я знаю только HTML, я знаю, что вы можете сделать это в CSS, но мне было интересно, можно ли это сделать, используя только HTML.

• text-align: center;
• margin: auto;
• margin-left: auto;
• margin-right: auto;

4 ответа

• Как центрировать ссылку заголовка в CSS?

Поэтому я разрабатываю веб-сайт в CSS и пытаюсь центрировать свою навигационную панель (заголовок со ссылками), но когда я использую свойства text-align : center и Margin : auto, это не работает. Вот мой код файла HTML: My website

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

либо установка a с text-align: center;

или применяя text-align: center; к своему родителю

По умолчанию a anchor elemenet является встроенным элементом и не имеет определенного width . поэтому вы можете сделать текст внутри центрированным, если вы либо определяете его ширину явно, как XX px, либо, как мой пример, где ) сделайте его блочным элементом, а блочные элементы по умолчанию будут иметь полную ширину его родителя.

оберните его внутри элемента p и назначьте text-align:center; элементу p .

• Как центрировать ссылку изображения внутри div

Я пытаюсь центрировать ссылку изображения внутри div, но что-то идет не так. Мой код:

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

Вы можете просто сделать это:

Похожие вопросы:

У меня есть ссылка с надписью Get D1 , которую мне нужно центрировать в середине страницы. Я попробовал text-align:center, но это работает с самим текстом и на самом деле не центрирует ссылку в.

Как я могу центрировать встроенный div (а не его содержимое) с помощью css? Очень важно: ширина div неизвестна (я не могу ее указать)

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

Поэтому я разрабатываю веб-сайт в CSS и пытаюсь центрировать свою навигационную панель (заголовок со ссылками), но когда я использую свойства text-align : center и Margin : auto, это не работает.

Новичок в CSS. Я пытаюсь центрировать вложенные дивы, используя приведенный ниже код HTML My website

Как центрировать ссылку изображения внутри div

Я пытаюсь центрировать ссылку изображения внутри div, но что-то идет не так. Мой код:

У меня есть очень простой макет, который я пытаюсь достичь в CSS, но мне не везет. Все, что я хочу сделать, это (горизонтально) центрировать div, содержащий ссылку. Размер div должен основываться на.

Я очень Новичок и возился с каким-то кодом ( просто HTML и CSS), но я не могу получить свою ссылку в центр, как мой текст? Удостоверения личности нужны только для практики, я знаю, что они не.

Я пытался центрировать изображение в css, но мой код не работает. img.center

Мне нужна помощь, чтобы центрировать ссылку в div. горизонтальное и вертикальное выравнивание, я не знаю, как это работает, я тестирую несколько возможностей, но я потерпел неудачу. .Menu

• Facebook
• Вконтакте
• Twitter
• Google

text-align — свойство для блочного элемента и применять его нужно к родительскому элементу строчного

Я действительно новичок в HTML и задавался вопросом, как вы центрируете несколько ссылок с html?

Но проблема в том, что я пытаюсь поместить туда другие ссылки, например:

Он просто помещает их в отдельные строки. Я считаю, что это происходит из-за функции

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

Спасибо за любую помощь!

в вашем коде есть некоторые ошибки — первое: вы не закрыли вас p -tag:

next: p означает «абзац» и является блочным элементом (поэтому он вызывает разрыв строки).

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

в конце концов, это, по крайней мере, было бы правильным html, но все же не совсем то, что вы хотите, потому что text-align:center центрирует текст в этом элементе, поэтому вам нужно будет установить это для элемента, который содержит эти ссылки (это кусок html не отправлен, поэтому я не могу вас исправить, но, надеюсь, вы понимаете) — чтобы показать это, я буду использовать простой div :

ИЗМЕНИТЬ: еще несколько дополнений к вашему вопросу:

• p не является «функцией», но вы правы, это вызывает проблему (потому что это блок-элемент)
• то, что вы пытаетесь использовать, это css — он просто встроен, а не помещается в отдельный файл, но вы не делаете «просто HTML» здесь.

Ломаю голову над проблемой, есть блок скажем шириной 900px в него нужно поместить кнопки шириной скажем 200px разместить их по центру ну и придать красивостей.

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

Почему не применяется text-align: center к ссылке. Или каким еще способом можно выровнять ссылку по центру?

Как центрировать блок?
вот такой вот банальный вопрос. думаю центрировать див, путем position:absolute, как это делаю я -.

Как центрировать слайд-шоу?
Несколько часов провозился, никак не получается настроить вывод слайд-шоу по центру. 1. Модуль.

Html как сделать ссылку по центру

Как центрировать текст и заголовки в CSS с помощью свойства Text-Align

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

Вот почему приведенный ниже текст CTA расположен по центру.

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

Как центрировать текст в CSS

Чтобы центрировать текст в CSS, используйте свойство text-align и задайте для него значение ‘center’. Вы можете использовать эту технику внутри блочных элементов, таких как div.

Вы также можете центрировать текст в HTML, что полезно, если вы хотите центрировать только отдельные элементы на странице в каждом конкретном случае. Но если вы заинтересованы в центрировании элемента типа, например, всех h2 в вашем блоге, лучше сделать это в CSS.

Выравнивание текста по центру в CSS

Ниже мы рассмотрим несколько руководств по центрированию текста снаружи и внутри других элементов.

Центрирование текста с помощью свойства Text-Align

Начнем с простого примера. Допустим, у вас есть текстовая веб-страница, и вы хотите центрировать весь текст. Затем вы можете использовать универсальный селектор CSS (*) или тело селектора типа для выбора каждого элемента на странице. Затем вы должны установить для свойства text-align значение center.

Вот как это выглядит:

См. статью Центрирование текста пером с использованием свойства Text-Align от HubSpot (@hubspot) на CodePen.

Вот результат:

Центрирование типа HTML-элемента с помощью свойства Text-Align другие элементы кроме текста? В этом случае вы должны использовать то же свойство text-align, но другой селектор CSS.

Например, вы хотите, чтобы заголовки располагались по центру страницы, а абзацы — по левому краю. Затем вы должны использовать селектор типа h3 и установить для свойства text-align значение center. Вам не нужно добавлять дополнительный код для выравнивания абзацев — по умолчанию они будут выровнены по левому краю.

Вот как это выглядит:

См. Pen Centering HTML Element Type with CSS by HubSpot (@hubspot) на CodePen.

Вот результат:

Центрирование отдельных элементов с помощью CSS ID

Если вы хотите центрировать только один элемент на странице, вы можете добавить атрибут ID к элементу и целевому это с селектором ID. Или вы можете использовать встроенный CSS.

Во-первых, давайте воспользуемся атрибутом ID и селектором.

Вот CSS:

См. статью Центрирование отдельных элементов с помощью CSS от HubSpot (@hubspot) на CodePen.

Вот результат:

Центрирование текста внутри кнопки с помощью встроенного CSS

Теперь давайте воспользуемся встроенным CSS. Но вместо центрирования заголовков и абзацев давайте центрируем текст внутри другого элемента.

Допустим, я создаю веб-страницу с помощью Bootstrap CSS и добавляю кнопку Bootstrap, которую хочу центрировать на странице. Выравнивание кнопки и текста внутри кнопки будет немного отличаться от приведенных выше примеров. Это связано с тем, что свойство text-align работает только с содержимым внутри блочных элементов, таких как заголовки и абзацы, а не с встроенными элементами, такими как кнопки.

Итак, во-первых, я должен обернуть кнопку в div. Затем я мог бы применить встроенный CSS к div, чтобы выровнять содержимое по центру внутри div.

Вот как это выглядит:

Посмотрите, как ручка центрирует текст внутри кнопки с помощью CSS от HubSpot (@hubspot) на CodePen.

Вот результат:

Центрирование блочного элемента с использованием свойства Margin

Если вы центрируете весь блочный элемент, например div, свойство text-align не будет работать. (Обратите внимание, что это работает при центрировании содержимого внутри div.) Вместо этого вы можете использовать свойство margin для центрирования всего элемента. Вот как это выглядит:

См. Pen, центрирующий блочный элемент с помощью свойства Margin от HubSpot (@hubspot) на CodePen.

Вот результат:

Узнайте, как центрировать div в CSS, здесь.

Центрирование текста внутри элемента Div

Допустим, вы хотите центрировать элемент div, а также текст внутри него. Как и в предыдущем примере, добавьте селектор идентификатора «центр» к выбранному вами div, затем установите для поля значение «авто». Затем добавьте объявление «text-align: center».

Вот как это выглядит:

См. центрирование текста пером внутри центрированного элемента Div от HubSpot (@hubspot) на CodePen.

Вот результат:

Как видно из приведенных выше примеров, свойство text-align указывает только горизонтальное выравнивание текста. Задать вертикальное выравнивание текста сложнее. Давайте посмотрим ниже.

Выровнять текст по вертикали

Вы можете центрировать текст по вертикали несколькими способами. Для приведенных ниже методов текст должен содержаться в родительском элементе, таком как div. Начнем с самого простого.

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

Вертикальное центрирование текста с использованием отступов CSS

Одним из самых простых решений вертикального центрирования текста является использование отступов сверху и снизу.

Чтобы применить заполнение CSS к элементу, я могу использовать метод длинной формы и определить свойства padding-top и padding-bottom в моем CSS. Или я могу использовать сокращение CSS для свойства padding и включить три значения: первое значение будет представлять верхнее заполнение, второе — левое и правое заполнение, а третье — нижнее заполнение.

Ниже приведен код CSS, использующий сокращенный метод:

См. текст с вертикальным центрированием пера с использованием отступов CSS от HubSpot (@hubspot) на CodePen.

Вот результат:

Вертикальное центрирование текста с использованием свойства CSS Line-Height

Чтобы вертикально центрировать текст внутри элемента, вы также можете использовать свойство CSS line-height. Вам нужно будет установить свойство со значением, равным высоте элемента контейнера.

Вот CSS:

См. текст с вертикальным центрированием пера с использованием свойства CSS Line-Height от HubSpot (@hubspot) на CodePen.

Вот результат:

Центрирование текста по вертикали с использованием свойств CSS Position и Transform

Другой метод центрирования текста по вертикали на странице требует свойства CSS position и свойства transform.

Для начала установите относительную позицию блока, содержащего текст. Затем вы хотите стилизовать абзац внутри div. Во-первых, установите для него абсолютное положение, чтобы оно не вписывалось в обычный документооборот. Затем установите свойства left и top на 50%. Это говорит браузеру выровнять левый и верхний край абзаца с центром страницы по горизонтали и вертикали (т.е. 50% вправо и вниз по странице). Проблема в том, что мы не хотим, чтобы края абзаца выровнялись по середине страницы — мы хотим, чтобы центр абзаца выровнялся посередине страницы.

Здесь на помощь приходит свойство преобразования CSS. Используя метод преобразования, известный как метод translate(), мы можем перемещать абзац по осям X и Y. Чтобы действительно центрировать абзац, мы хотим переместить его на 50% влево и вверх от его текущего положения. Это скажет браузеру поместить центр абзаца в центр страницы.

Вот CSS:

См. текст с вертикальным центрированием пера с использованием свойств CSS Position and Transform от HubSpot (@hubspot) на CodePen.

Вот результат:

Центрирование текста по вертикали с использованием Flexbox

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

Во-первых, вам нужно определить родительский контейнер — в данном случае div — как гибкий контейнер. Вы делаете это, устанавливая для свойства display значение «flex». Затем установите для свойства align-items и justify-content значение «center». Это укажет браузеру центрировать гибкий элемент (div внутри div) по вертикали и горизонтали.

Вот CSS:

См. текст с вертикальным центрированием пера с помощью Flexbox от HubSpot (@hubspot) на CodePen.

Вот результат:

Как использовать встроенный, внутренний или внешний CSS для центрирования текста?

Рассматривая различные варианты центрирования текста с помощью CSS, вы можете задаться вопросом, лучше ли использовать встроенный, внутренний или внешний CSS.

Встроенный CSS включается в открывающий тег элемента следующим образом:

Внутренний CSS включается между тегами

Внешний CSS относится к CSS во внешней таблице стилей, на которую вы ссылаетесь в теге заголовка вашего HTML-документа.

Итак, какой из этих вариантов вам подходит?

Если вы центрируете одноразовый элемент в сообщении блога или на странице, придерживайтесь встроенного CSS. Таким образом, вам не нужно создавать класс CSS или идентификатор только для этого элемента, который затем нужно будет добавить в таблицу стилей.

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

Если вы хотите центрировать тип элемента по всему веб-сайту, используйте внешнюю таблицу стилей.

Центрирование текста на веб-сайте

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

Примечание редактора: этот пост был первоначально опубликован в ноябре 2020 г. и был обновлен для полноты информации.

Темы: Начальная загрузка и CSS

Не забудьте поделиться этим постом!

Вот разница между Flexbox, CSS Grid и Bootstrap

Процессы веб-разработки развивались с момента появления Интернета: разработчики выпустили адаптивные модели макетов, чтобы упростить создание и поддержку веб-страниц. Наряду с Bootstrap, самым большим соперничеством среди поддерживаемых моделей макетов является CSS Grid против Flexbox.

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

Раньше владельцам сайтов приходилось «взламывать» свой CSS, используя табличные элементы, встроенные блоки, плавающие элементы и различные типы позиционирования. Для создания сложных макетов также требовался JavaScript. Эти методы были в некоторой степени эффективными, но в них отсутствовали ключевые функции, такие как вертикальное центрирование, что делало их несовместимыми в разных браузерах. Они также значительно усложнили поддержку кода сайта.

Давайте сравним некоторые из наиболее поддерживаемых моделей макетов.

Сравнение CSS Grid и Flexbox

CSS Grid и Flexbox — это модели макетов, которые имеют сходство и даже могут использоваться вместе. Основное отличие состоит в том, что вы можете использовать CSS Grid для создания двухмерных макетов. Напротив, вы можете использовать Flexbox только для создания одномерных макетов. Это означает, что вы можете размещать компоненты по осям X и Y в CSS Grid и только по одной оси во Flexbox.

Давайте рассмотрим каждую модель ниже, начиная с CSS Grid.

С помощью CSS Grid вы можете выравнивать компоненты по столбцам и строкам. Эта функция делает его идеальным для больших макетов, которые должны быть разделены на разделы. Другими словами, этот тип макета будет иметь элементы, которые должны перекрываться и наслаиваться, а не быть линейными.

Ниже приведена полезная иллюстрация (автор Аюш Гупта) возможного макета с помощью CSS Grid.

Источник

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

Ниже приведена еще одна полезная иллюстрация от разработчика Аюша Гупты, на которой показан макет, который возможен с помощью Flexbox.

Источник

В статье о хитростях CSS соучредитель CodePen Крис Койер сделал важное замечание. Как и Flexbox, вы можете использовать CSS Grid для создания одномерных макетов. Как и CSS Grid, Flexbox можно использовать для создания двухмерных макетов. Разница здесь в том, что CSS Grid позволяет создавать 2D-макеты способами, недоступными Flexbox.

С помощью Flexbox вы также можете создавать многострочные flex-контейнеры. Вам просто нужно применить свойство flex-wrap со значением «wrap» к вашему контейнеру. Таким образом, если ваши элементы слишком велики для отображения в одной строке в определенном окне просмотра, они будут переноситься на другую строку, а не уменьшаться, чтобы поместиться в одну строку.

В некотором смысле создает строки и столбцы. Но то, как обернутые flex-элементы выстраиваются в строке, не зависит от того, как они выстраивались в предыдущей строке. Это потому, что вы не можете контролировать, где заканчиваются гибкие элементы, как в CSS Grid; flex-элементы просто перемещаются вдоль одной оси, а затем соответствующим образом оборачиваются. В результате макет будет больше похож на кирпичи, чем на сетку.

Вот параллельное сравнение макета, созданного с помощью Flexbox, и макета, созданного с помощью CSS Grid, которое демонстрирует этот эффект.

Источник

Прежде чем двигаться дальше, важно понять, что эти модели компоновки не исключают друг друга. Вы можете комбинировать их, используя контейнер Flexbox внутри контейнера CSS Grid. Обратите внимание, однако, что вы не можете использовать CSS Grid Container внутри контейнера Flexbox.

Flexbox против Bootstrap

Важно понимать, что система сетки Bootstrap 4 построена с помощью Flexbox. Что отличает Bootstrap от использования только Flexbox, так это процесс написания кода. С помощью Bootstrap вы можете создать сетку, используя только HTML. С Flexbox вы должны использовать HTML и CSS. Давайте подробнее рассмотрим каждый процесс ниже.

Bootstrap предлагает систему из двенадцати столбцов с пятью адаптивными уровнями по умолчанию, переменными и миксинами Sass, а также десятками предопределенных классов. Это означает, что вы можете использовать сетку flexbox для мобильных устройств для создания уникальных и сложных макетов без необходимости создавать их с нуля — это также означает, что вам необходимо понимать его уникальный синтаксис.

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

Большинству владельцев сайтов и близко не нужно двенадцать столбцов.

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

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

Префикс класса	размер устройства	максимальная ширина контейнера
.col-	сверхмалые устройства	менее 576 пикселей
. col-sm-	небольшие устройства	равно или больше 576 пикселей
.col-md-	средние устройства	равно или больше 768 пикселей
.col-lg-	большие устройства	равно или больше 992 пикселей
.col-XL-	очень большие устройства	равно или больше 1200 пикселей

Поскольку система столбцов и адаптивные уровни работают вместе, вы часто будете видеть номер и префикс, определяющий класс .col. Мы увидим это в примере ниже.

Пример Bootstrap Grid

Допустим, я хочу создать шесть столбцов одинаковой ширины, которые накладываются друг на друга на мобильных телефонах или экранах шириной менее 576 пикселей. Для этого я бы использовал класс .col-sm-2 .

Применив этот класс к шести элементам

 
   
 
    <дел> 
 
 
. col-sm-2
 

 
 
.col-sm-2
 

 
 
.col-sm-2
 

 
 
.col-sm-2
 

 
 
.col-sm-2
 

 
 
.col-sm-2
 

 
  
 
  
 
   
 

.
 
   
 
    <дел> 
 
 <дел>1 
 
 <дел>2 
 
 <дел>3 
 
 <дел>4 
 
 <дел>5 
 
 <дел>6 
 
  
 
   
 

 
   
 
    .flex-контейнер { 
 
 дисплей: гибкий; 
 
 высота: 250 пикселей; 
 
 цвет фона: серый; 
 
 } 
 
   
 

 
   
 
    .flex-контейнер > div { 
 
 цвет фона: #f1f1f1; 
 
 ширина: 100 пикселей; 
 поле 
: 10 пикселей; 
 
 выравнивание текста: по центру; 
 
 высота строки: 60 пикселей; 
 
 размер шрифта: 48px; 
 
 } 
 
   
 

 
   
 
    .flex-контейнер { 
 
 дисплей: гибкий; 
 
 высота: 250 пикселей; 
 
 цвет фона: серый; 
 
 } 
 
   
 
 .flex-контейнер > div {
 
 цвет фона: #f1f1f1; 
 
 ширина: 100 пикселей; 
 поле 
: 10 пикселей; 
 
 выравнивание текста: по центру; 
 
 высота строки: 50 пикселей; 
 
 размер шрифта: 48px; 
 
 гибкий: 1 1 150 пикселей; 
 
 } 
 
   
 

.
 
   
 
    <дел> 
 
 
Один
 

 
 
Два
 

 
 
Три
 

 
 
Четыре
 

 
 
Пять
 

 
  
 
   
 

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

 
   
 
    .wrapper { 
 
 дисплей: сетка; 
 
 цвет фона: серый; 
 
 grid-template-columns: 1fr, 1fr, 1fr; 
 
 } 
 
   
 

.
 
   
 
    .wrapper { 
 
 дисплей: сетка; 
 
 цвет фона: серый; 
 
 grid-template-columns: 1fr, 1fr, 1fr; 
 
 автоматических строки сетки: 100 пикселей; 
 
 } 
 
   
 

 
   
 
    .box1 { 
 
 сетка-столбец-начало: 1; 
 
 сетка-столбец-конец: 4; 
 
 сетка-ряд-начало: 1; 
 
 сетка-ряд-конец: 2; 
 
 } 
 
   
 
 .box2 { 
 
 сетка-столбец-начало: 1; 
 
 сетка-ряд-начало: 2; 
 
 сетка-ряд-конец: 4; 
 
 } 
 
 .box4 { 
 
 сетка-столбец-начало: 2; 
 
 сетка-ряд-начало: 2; 
 
 сетка-ряд-конец: 4; 
 
 } 
 
   
 

 
   
 
    <дел> 
 
 
.col-md-8
 

 
 
.col-6 .col-md-4
 

 
  
 
   
 

 
   
 
    <дел> 
 
 
.col-6 .col-md-4
 

 
 
.col-6 .col-md-4
 

 
 
.col-6 .col-md-4
 

 
  
 
   
 

.
 
   
 
    <дел> 
 
 
.col-6
 

 
 
.col-6
 

 
  
 
  
 
   
 

 <дел>
      <дел>
      

 .контейнер {
  ширина: 500 пикселей;
  высота: 250 пикселей;
  поле: 50 пикселей;
  контур: сплошной 1px черный;
}
.круг {
  ширина: 50 пикселей;
  высота: 50 пикселей;
  радиус границы: 50%;
  цвет фона: черный;
} 

 .контейнер {
  ширина: 500 пикселей;
  высота: 250 пикселей;
  поле: 50 пикселей;
  контур: сплошной 1px черный;
  дисплей: гибкий;
  выравнивание содержимого: по центру;
}
.круг {
  ширина: 50 пикселей;
  высота: 50 пикселей;
  радиус границы: 50%;
  цвет фона: черный;
} 

 display: flex;
выравнивание содержимого: по центру; 

 .контейнер {
  ширина: 500 пикселей;
  высота: 250 пикселей;
  поле: 50 пикселей;
  контур: сплошной 1px черный;
  дисплей: гибкий;
  выравнивание элементов: по центру;
}
.круг {
  ширина: 50 пикселей;
  высота: 50 пикселей;
  радиус границы: 50%;
  цвет фона: черный;
} 

 .container {
  ширина: 500 пикселей;
  высота: 250 пикселей;
  поле: 50 пикселей;
  контур: сплошной 1px черный;
  дисплей: гибкий;
  выравнивание содержимого: по центру;
  выравнивание элементов: по центру;
}
.круг {
  ширина: 50 пикселей;
  высота: 50 пикселей;
  радиус границы: 50%;
  цвет фона: черный;
} 

 display: flex;
выравнивание содержимого: по центру;
выравнивание элементов: по центру; 

 <дел>
      <дел>