Содержимое моей карты не будет правильно центрироваться в bootstrap 5

Я хочу центрировать все содержимое моих карточек, но все это будет справа

код моей карты:

<!doctype html>
<html lang = "en">

<head>
  <meta charset = "utf-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin = "anonymous">
</head>

<body>
  <h1>Hello, world!</h1>



  <div class = "container mt-5 p-5">

    <div class = "row g-4">
      <div class = "col-12 col-md-6 col-lg-3">
        <div class = "card align-items-center bg-light">
          <img src = "img/oranvour.png" alt = "dfg juice" class = "card-img-top">
          <div class = "card-body">
            <h5 class = "card-title">Juice</h5>
            <p class = "card-text">Price: $199.00</p>

            <div class = "form-outline">
              <label class = "form-label" for = "typeNumber">amount</label>
              <input type = "number" id = "typeNumber" class = "form-control" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity = "sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin = "anonymous"></script>
</body>

</html>

Я ожидаю, что весь контент будет в центре карты, а не выровнен по правому краю.

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
2
0
54
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

Вам нужно установить класс text-center на card следующим образом:

<div class = "card text-center bg-light" style = "width: 18rem;">

<!doctype html>
<html lang = "en">

<head>
  <meta charset = "utf-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin = "anonymous">
</head>

<body>
  <h1>Hello, world!</h1>

  <div class = "container mt-5 p-5">

    <div class = "row g-4">

      <div class = "col-12 col-md-6 col-lg-3">
        <div class = "card text-center bg-light" style = "width: 18rem;">
          <img src = "https://images.unsplash.com/photo-1669111957903-36e4da270ef1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt = "" class = "card-img-top">
          <div class = "card-body">
            <h5 class = "card-title">Juice</h5>
            <p class = "card-text">Price: $199.00</p>

            <div class = "form-outline">
              <label class = "form-label" for = "typeNumber">amount</label>
              <input type = "number" id = "typeNumber" class = "form-control" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity = "sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin = "anonymous"></script>
</body>

</html>

спасибо, что сработало, как мне теперь добавить немного интервала между элементами на карточке?

John Johnson 23.11.2022 14:39

@JohnJohnson Добро пожаловать! Рад, что смог вам помочь :-) Думаю, вы можете использовать свойство padding, например, p-2... У Bootstrap отличные документы!

MarioG8 23.11.2022 14:42

просто добавьте «mx-auto» в класс над картой следующим образом:

<div class = "container mt-5 p-5">
  <div class = "row g-4">
   <div class = "col-12 col-md-6 col-lg-3 mx-auto">
      <div class = "card align-items-center bg-light">
        <img src = "img/oranvour.png" alt = "dfg juice" class = "card-img-top">
        <div class = "card-body">
            <h5 class = "card-title">Juice</h5>
            <p class = "card-text">Price: $199.00</p>

            <div class = "form-outline">
              <label class = "form-label" for = "typeNumber">amount</label>
              <input type = "number" id = "typeNumber" class = "form-control" />
          </div>                      
        </div>
      </div>
    </div>
  </div>
<div/>

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