Bootstrap 4, как мне выровнять кнопку по центру?
Не могу понять, как отцентрировать эту кнопку. В BS 3 я бы просто использовал центральный блок, но это не вариант в BS4. Любой совет?
bbennett36 15 Янв 2017 в 21:53
8 ответов
Лучший ответ
В Bootstrap 4 следует использовать класс text-center для выравнивания встроенных блоков .
ПРИМЕЧАНИЕ. text-align:center; , определенный в пользовательском классе, который вы применяете к родительскому элементу, будет работать независимо от используемой вами версии Bootstrap. И это именно то, что .text-center применимо.
Если контент для центрирования — это block или flex (не inline- ), можно использовать flexbox для центрирования:
. который применяет display: flex; justify-content: center к родителю.
Примечание: не используйте .row.justify-content-center вместо .d-flex.justify-content-center , поскольку .row применяет отрицательные поля в определенных интервалах реагирования, что приводит к неожиданным горизонтальным полосам прокрутки (если только > является прямым потомком .container , который применяет боковое заполнение для нейтрализации отрицательного поля на правильных интервалах реагирования). Если по какой-либо причине вы должны использовать .row , переопределите его поля и отступы с помощью .m-0.p-0 , и в этом случае вы получите в значительной степени те же стили, что и .d-flex .
Важное примечание. Второе решение проблематично, когда центрированное содержимое (кнопка) превышает ширину родительского элемента ( .d-flex ), особенно если родительский элемент имеет ширину области просмотра, особенно потому, что это делает его невозможным для горизонтальной прокрутки к началу содержимого (крайнее левое).
Поэтому не используйте его, когда контент для центрирования может стать шире, чем доступная родительская ширина, и весь контент должен быть доступен.
tao 19 Май 2020 в 12:37
Что сработало для меня (адаптируйте «css / style.css» к вашему пути css):
Работающие методы центрирования с помощью CSS
CSS
Автор admin На чтение 6 мин. Просмотров 4.3k. Опубликовано 11 января, 2020
# Горизонтальное центрирование
Тема центрирования довольно популярная, существует уже множество разных способов. В этой статье вы найдете работающие способы как горизонтального, так вертикального центрирования, которые реализуются достаточно просто.
1. Центрируемый элемент строчный (inline):
Можно назначить родительскому контейнеру свойство text-align: center . Ниже пример:
See the Pen wzjPWN by Ruslan (@rkaliev) on CodePen.0
2. Центрируемый элемент блочный (block):
В этом случае задаем ему ширину (иначе он займёт всю ширину родительского контейнера и не будет нуждаться в центрированиии) и автоматическую установку левого и правого полей: margin-left: auto и margin-right: auto . Часто используют такую сокращённую запись: margin : 0 auto; Этот способ работает вне зависимо от ширины центрируемого блочного элемента и его родителя. Ниже пример:
See the Pen BLxmLr by Ruslan (@rkaliev) on CodePen.0
3. Несколько блочных элементов в ряду:
Можно указать для них тип отображения inline-block или же применить flexbox. Ниже пример:
See the Pen YGLEpa by Ruslan (@rkaliev) on CodePen.0
# Вертикальное центрирование
Что же касается текста, то многие для центрирования по вертикали начинают использовать свойство vertical-align, что вполне логично. Но, к сожалению, оно не действует в блочных элементах (например,в параграфах (p) внутри элемента (div)). Но есть другие методы центрирования блочных элементов, выбор которых зависит от того, что центрируется по отношению к внешнему контейнеру.
1. CSS метод со свойствами таблиц
Свойство vertical-align отлично действует для ячеек таблиц. Представим родительский элемент как таблицу, а дочерний как ячейку и применим свойство vertical-align: middle для вертикального центрирования содержания. В итоге контент в элементе-потомке отцентрируется по вертикали. Рассмотрим наш пример:
Как отцентрировать текст в HTML
В создании этой статьи участвовала наша опытная команда редакторов и исследователей, которые проверили ее на точность и полноту.
Команда контент-менеджеров wikiHow тщательно следит за работой редакторов, чтобы гарантировать соответствие каждой статьи нашим высоким стандартам качества.
Количество просмотров этой статьи: 32 852.
В этой статье:
В этой статье мы расскажем вам, как отцентрировать текст на HTML-сайте с помощью CSS. В HTML это делалось через тег , который теперь считается устаревшим и больше не работает в большинстве браузеров. [1] X Источник информации
Метод 1 из 2:
CSS
Откройте файл со стилями CSS. Хотя тег устарел, можно создать новый элемент и добавить его на страницу, чтобы отцентрировать текст в пределах этого элемента. Если у вас нет отдельного файла для стилей CSS, найдите их в верхней части HTML-файла между тегами «
«. [2] X Источник информации
- Если указанных тегов нет, добавьте их после тега в верхней части файла, например, так:
html> body> style> style>
div.a >
Как расположить кнопку по центру css
Как выровнять кнопку по центру используя CSS и HTML
Чтобы расположить кнопку в центре HTML страницы, можно использовать 3 разных подхода:
Разберем их подробнее.
Как использовать margin: auto для центрирования кнопки
Первый и, возможно, самый простой вариант — добавить кнопке CSS свойство margin: 0 auto , а затем добавить display: block , чтобы сделать кнопку в центре.
margin: 0 auto — это краткая форма установки верхнего и нижнего полей в 0 и левого и правого полей на авто.
Автоматическое поле — это то, что заставляет кнопку центрироваться. Тут важно, чтобы кнопка находилась внутри блока.
Как центрировать кнопку с помощью HTML тега div
Второй вариант — обернуть кнопку тегом div , а затем использовать text-align: center для центрирования кнопки внутри этого .
Как будто ты размещаешь текст по центру.
Обратной стороной этого подхода является то, что каждый раз, когда ты хочешь центрировать кнопку, тебе придется создавать новый элемент div только для этой кнопки.
А если у тебя много кнопок, которые требуют частого обновления стиля, поддерживать их быстро становится проблемой.
В таком случае лучше использовать первый вариант.
Короче говоря, если вы настаиваете на использовании этого подхода, сделайте это только для редких кнопок.
Как центрировать кнопку с помощью CSS flexbox
Третий вариант — использовать flexbox для центрирования кнопки.
Этот подход идеален, если ты уже используешь flexbox на веб-странице, а кнопка находится внутри родительского элемента.
How TO — Center a Button in DIV
Learn how to center a button element vertically and horizontally with CSS.
How To Center a Button Vertically
Example
How To Center Vertically AND Horizontally
Example
You can also use flexbox to center things:
https://amdy.su/wp-admin/options-general.php?page=ad-inserter.php#tab-8
Example
Tip: Go to our CSS Align Tutorial to learn more about aligning elements.
Tip: Go to our CSS Transform Tutorial to learn more about how to scale elements.
Tip: Go to our CSS Flexbox Tutorial to learn more flexbox.
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
Как сделать кнопку по центру?
inline-block заставляет контейнер (div в данном случае) съёжится до размеров того, что в нём находится. Таким образом text-align не годится для выравнивания содержимого внутри inline-block . Ибо ему просто некуда двигаться. Размеры-то одинаковые.
Если div шире своего содержимого, то text-align работает.
Но Ваш кнопочный div, когда он нормальный block, растягивается по длине на всю ширину страницы. Поэтому кнопка выравнивается относительно страницы и уезжает правее относительно центра текста.
Можно сузить общий контейнер для текста и кнопки с помощью того же inline-block . Он не будет шире текста (предполагаем текст шире кнопки), кнопочный div таким образом тоже по ширине будет как текст, и кнопка теперь выравнивается относительно текста.
Понадобилось правильно установить всего два свойства css. Они самые первые. Остальное для красоты, если это кому-то нравится. Правда есть ещё элемент ubasility. Кнопка работает при нажатии не только по надписи, но и по всей области кнопки. Пользователю не надо быть снайпером.
Как Выровнять Кнопку По Центру В CSS
Кнопки — отличный способ форматирования CTA или других ссылок. Ознакомьтесь с этим простым руководством по центрированию кнопок в CSS.
Чтобы отцентрировать кнопку в CSS, элемент должен быть выровнен по горизонтали и вертикали в пределах своего родительского контейнера.
Это можно сделать тремя способами, в зависимости от требований к дизайну и типа макета, с которым вы работаете.
Вот краткое руководство, которое поможет вам разобраться с различными способами центрирования кнопки в CSS.
Важное раскрытие информации: мы являемся гордыми партнерами некоторых инструментов, упомянутых в этом руководстве. Если вы перейдете по партнерской ссылке и впоследствии совершите покупку, мы получим небольшую комиссию без дополнительных затрат с вашей стороны (вы ничего не платите дополнительно). Для получения дополнительной информации ознакомьтесь с нашим раскрытием информации о партнерах.
Центрирование Кнопки С Помощью Flexbox
Flexbox — это простой в использовании инструмент компоновки в CSS, который позволяет выравнивать элементы внутри контейнера.
Преимущество использования Flexbox для центрирования кнопки заключается в том, что он может подстраиваться под различные размеры и ориентации экрана, а также поддерживает вертикальное и горизонтальное выравнивание.
Чтобы отцентрировать кнопку с помощью Flexbox, используйте следующий код:
Выравнивание Кнопки По Центру С Помощью Макета Сетки
Использование сетки позволяет добиться большей организованности и структурированности макета. Здесь элементы могут быть размещены в определенных ячейках и охватывать несколько столбцов или строк.
Чтобы отцентрировать кнопку с помощью макета сетки, необходимо изменить свойство display на Grid и установить свойство place-items на center center.
В этом примере мы также установили свойства стиля для кнопки.
Центрирование Кнопки С Помощью Выравнивания Текста
Если вы новичок в разработке или хотите использовать простое кодирование для выравнивания кнопки, вам подойдет метод выравнивания текста.
Он подходит для небольших элементов без сложных макетов и совместим с современными типами браузеров.
Чтобы отцентрировать кнопку с выравниванием текста, необходимо задать свойства width, margin и text-align следующим образом:
Здесь же можно задать другие свойства, например, цвет.
Часто Задаваемые Вопросы
В чем разница между выравниванием текста и использованием Flexbox или Grid для центрирования кнопки в CSS?
Flexbox и Grid могут центрировать кнопку по горизонтали и вертикали, а выравнивание текста можно использовать для центрирования кнопки по горизонтали.
Как отцентрировать кнопку в div?
Чтобы отцентрировать кнопку в div в CSS, необходимо задать свойства width, display, justify-content и align-items. Вот пример:
Как выровнять кнопку вправо в CSS?
Установите свойство float кнопки в ‘right’, чтобы переместить ее в правую часть контейнера.
Похожие публикации:
- 2 в 32 степени это сколько
- Где найти it наставника
- Как создать сервер mysql
- Как включить трансляцию в стим