Выровнять текст по центру в кнопке Bootstrap

Мне трудно центрировать текст внутри кнопки Bootstrap. Вот что я пробовал

<div class = "d-grid gap-2 col-6 mx-auto">

  <a class = "btn btn-primary d-flex align-items-center" type = "button" style = "height: 200px;margin-bottom: 150px;font-size: 3rem; text-align: center; font-weight: bold;" href = "all-listings.html"> Browse All Listings</a>

</div>

Результат показан на картинке:

Любой совет о том, как это исправить?

html css twitter-bootstrap

08.02.2023 19:42

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

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

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Добавьте style = "text-align: center;" в контейнер div.

<div class = "d-grid gap-2 col-6 mx-auto" style = "text-align: center;">

  <a class = "btn btn-primary d-flex align-items-center" type = "button" style = "height: 200px;margin-bottom: 150px;font-size: 3rem; text-align: center; font-weight: bold;" href = "all-listings.html"> Browse All Listings</a>

</div>

08.02.2023 19:50

Ответ принят как подходящий

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

<button class = "btn btn-primary" 
style = "height: 200px; margin-bottom: 150px; font-size: 3rem; font-weight: bold;"
onclick = "window.location.href = 'all-listings.html';">
Browse All Listings
</button>

08.02.2023 19:52

Кнопки Bootstrap уже имеют текст по центру по умолчанию, поэтому вы можете просто применить класс btn btn-primary, и это должно сработать. Не нужно ничего добавлять, просто убедитесь, что вы не перезаписываете стили начальной загрузки своими собственными стилями.

Для получения дополнительной информации ознакомьтесь с документацией на веб-сайте bootstrap .

08.02.2023 19:53

<a class = "btn btn-primary text-center" type = "button" style = "height: 200px;margin-bottom: 150px;font-size: 3rem; font-weight: bold;" href = "all-listings.html"> Browse All Listings</a>

Вы можете использовать текстовую утилиту в бутстрапе

08.02.2023 19:56

Другие вопросы по теме

Vue 3: невозможно позиционировать дочерний компонент как фиксированный для области просмотра с программно созданными компонентами

Я хочу наложить прямоугольник поверх другого прямоугольника

Зафиксируйте div в нижней части страницы с экраном небольшой высоты и займите его определенную позицию при прокрутке

ASP.NET Core 6 MVC не загружает стили CSS

Прокрутка по движению мыши

Как применить css только для первого промежутка

Выровнять заголовок по изображениям в flexbox при изменении размера страницы

Стиль шрифта не меняется на моем веб-сайте с настройкой Chrome?

Печать нескольких счетов в один клик typeScript

Как сделать две колонки с помощью CSS?

Выровнять текст по центру в кнопке Bootstrap

Ответы 4

Другие вопросы по теме

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