Как центрировать кнопку css

Bootstrap 4, как мне выровнять кнопку по центру?

Невозможно определить, как центрировать эту кнопку. В BS 3 я бы просто использовал центральный блок, но это не вариант в BS4. Любые советы?

В Bootstrap 4 вы должны использовать класс text-center для выравнивания встроенных блоков.

ПРИМЕЧАНИЕ: text-align:center; , определенный в пользовательском классе, который вы применяете к родительскому элементу, будет работать независимо от используемой вами версии Bootstrap. И это именно то, что применимо к .text-center .

Вот полный HTML-код, который я использую для центрирования по кнопке в форме Bootsrap после закрытия формы-группы:

Попробуйте это с помощью начальной загрузки

Используйте класс text-center в родительском контейнере для Bootstrap 4

С помощью утилит bootstrap 4 вы можете горизонтально центрировать сам элемент, устанавливая горизонтальные поля в ‘auto’.

Для автоматической установки горизонтальных полей можно использовать mx-auto . m относится к марже, а x относится к оси x (влево + вправо), а auto относится к настройке. Таким образом, для левого и правого полей будет установлено значение "Авто". Браузеры рассчитывают маржу одинаково и центрируют элемент. Настройка будет работать только с элементами блока, поэтому необходимо добавить блок display: и с помощью утилит начальной загрузки это делается с помощью d-block .

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

Класс начальной загрузки text-center также является очень хорошим решением, однако для него требуется родительский элемент-обертка. Преимущество использования автоматической маржи заключается в том, что это можно сделать непосредственно на самом элементе кнопки.

Как центрировать кнопку внутри элемента?

Я хотел бы сосредоточить на нем кнопку, как я могу это сделать?

14 ответов

Обновленный ответ

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

Вертикальное и горизонтальное выравнивание.

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

Исходный ответ с использованием фиксированной ширины и flexbox

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

Как центрировать кнопку WITHOUT a div с помощью CSS

Я пробовал использовать несколько различных техник, таких как:

но они не работают.

4 ответа

Возможный Дубликат : Как центрировать DIV в DIV? Я хочу центрировать <div> (я новичок в HTML5, а тега <center> больше нет) и во что бы то ни стало избегать использования таблицы. Это то, что у меня есть как CSS для <div> , о котором идет речь до сих пор: #roundedcorner <.

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

Это просто, просто сделайте его отображаемым в виде блочного элемента:

Попробуйте это (вам не нужен дополнительный div или установка ширины)

CSS

Используй это. Это работает:

Я использовал inline CSS, так как его легче показать здесь.

Если вы используете заданную ширину, то margin: 0 auto; будет работать.

Причина, по которой вам не нужно устанавливать ширину для <button> с margin: 0 auto; , когда вы также устанавливаете ее в display: block; , заключается в том, что <button> является заменяемым элементом. В основном это элементы, которые имеют заданную ширину и высоту без использования CSS.

Проверьте этот ответ SO, предоставленный @Brewal , для получения более подробной информации.

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

Как я могу горизонтально центрировать DIV с помощью кнопки textbox и на этом URL: http://tinyurl.com/d4lpyh5 ? С Уважением, Кевин

Я хочу знать, как центрировать div с CSS. Я погуглил кое-что из того, что & проверил на stackoverflow, но это противоречило моему коду CSS. Вот мой код (на всякий случай): body, p, span, div <.

У меня есть div, ширина которого равна 100%. Я хотел бы центрировать кнопку внутри него, как я могу это сделать? <div style=width:100%; height:100%; border: 1px solid> <button.

Возможный Дубликат : Как центрировать DIV в DIV? Я хочу центрировать <div> (я новичок в HTML5, а тега <center> больше нет) и во что бы то ни стало избегать использования таблицы. Это то.

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

я хочу центрировать одну кнопку вверх, а другую вниз. как я могу отредактировать свой css, чтобы достичь this.here is css- #ContactForm .button < margin-left:8px; margin-left:9px; float:right;.

Как лучше всего центрировать с помощью CSS? <div style=position: absolute; left: 50%;> <div style=position: relative; left: -50%> Centered content </div> </div> или просто.

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

Я чувствую, что слишком много думаю об этом или упускаю что-то маленькое. Мне нужно центрировать текст внутри div с помощью Foundation. Вот с чем я сейчас работаю: [1]<div [2].

Я пытаюсь центрировать абсолютную кнопку в div (внизу), но она, похоже, не работает.. Вот что я сейчас делаю: .mc-item < background: #F0F0F0; border: 1px solid #DDD; height: 140px; padding: 20px; >.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *