Почему я не могу центрировать кнопку в медиа-запросах

Поэтому я сделал две кнопки в сетке, и для того, чтобы они располагались ближе друг к другу, я использую justify-self: start и justify-self: end для кнопок. Все работает нормально, пока я не сделал медиа-запросы. Эти две кнопки не центрируются, хотя я установил их по центру.

@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

:root {
  --color-1: #ff8787;
  --color-2: #475569;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: "Roboto", sans-serif;
  color: var(--color-2);
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: var(--color-2);
}

h1,
h2 {
  font-weight: 300;
  line-height: 1.2;
  margin: 10px 0;
}

p {
  margin: 10px 0;
}

img {
  width: 100%;
}

/* Navbar */
.navbar {
  background-color: var(--color-1);
  height: 70px;
}

.navbar .flex {
  justify-content: space-between;
}

.nav-middle {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  text-align: left;
}

.nav-middle a:hover {
  text-decoration: underline;
}

.nav-right {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.login {
  font-size: 1.1rem;
}

.menu-sub {
  position: absolute;
  width: fit-content;
  display: none;

  background: #ddd;
  color: var(--color-2);

  z-index: 1;
}

.nav-middle li:hover .menu-sub,
.nav-middle li:active .menu-sub {
  display: block;
  overflow: auto;
}

.menu-sub a {
  padding: 0;
  margin-bottom: 0.35em;
}

.menu-sub a:hover {
  text-decoration: underline;
}

.menu-category {
  margin: 2.5rem 0 0.5em;
}

.menu-category:first-of-type {
  margin-top: 0;
}

.menu-col-1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.menu-sub-left {
  background-color: #7950f2;

  padding: 1rem 1rem;
}

.menu-sub ul {
  padding: 1rem 1rem;
}

/* Showcase */
.showcase {
  height: 400px;
  background-color: var(--color-1);
  columns: var(--color-2);
  position: relative;
}

.showcase h1 {
  font-weight: 500;
  margin-top: 3rem;
}

.showcase p {
  margin: 1.5rem 0;
}

.showcase .grid div {
  display: grid;
}

.showcase .grid div:first-of-type a {
  justify-self: end;
}

.showcase .grid div:nth-of-type(2) a {
  justify-self: start;
}

/* Utilities */
/* Text sizes */
.lead {
  font-size: 20px;
}

.sm {
  font-size: 1rem;
}

.mdm {
  font-size: 2rem;
}

.lg {
  font-size: 3rem;
}

.xl {
  font-size: 4rem;
}

.text-center {
  text-align: center;
}

/* margin */
.my-1 {
  margin: 1rem 0;
}

.my-2 {
  margin: 1.5rem 0;
}

.my-3 {
  margin: 2rem 0;
}

.my-4 {
  margin: 3rem 0;
}

.my-5 {
  margin: 4rem 0;
}

.m-1 {
  margin: 1rem;
}

.m-2 {
  margin: 1.5rem;
}

.m-3 {
  margin: 2rem;
}

.m-4 {
  margin: 3rem;
}

.m-5 {
  margin: 4rem;
}

/* padding */
.py-1 {
  padding: 1rem 0;
}

.py-2 {
  padding: 1.5rem 0;
}

.py-3 {
  padding: 2rem 0;
}

.py-4 {
  padding: 3rem 0;
}

.py-5 {
  padding: 4rem 0;
}

.p-1 {
  padding: 1rem;
}

.p-2 {
  padding: 1.5rem;
}

.p-3 {
  padding: 2rem;
}

.p-4 {
  padding: 3rem;
}

.p-5 {
  padding: 4rem;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  overflow: auto;
}

.btn {
  display: inline-block;
  padding: 10px 30px;
  cursor: pointer;
  background: #845ef7;
  color: var(--color-2);
  border: none;
  border-radius: 5px;
  transition: all 0.5s;
}

.btn:hover {
  background-color: #7950f2;
}

.btn-outline {
  background-color: #ff8787;
  border: 1px solid var(--color-2);
}

.card {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.123);
  margin: 10px;
  padding: 20px;
}

.flex {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

/* Media queries */
/* Tablets and Under */
@media (max-width: 768px) {
  .showcase {
    height: auto;
  }

  .grid,
  .showcase .grid {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }

  .showcase .grid a {
    justify-self: center;
  }
}

<!DOCTYPE html>
<html lang = "en">
  <head>
    <meta charset = "UTF-8" />
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0" />

    <script
      type = "module"
      src = "https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"
    ></script>
    <script
      nomodule
      src = "https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"
    ></script>

    <link
      rel = "stylesheet"
      href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
      integrity = "sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A= = "
      crossorigin = "anonymous"
      referrerpolicy = "no-referrer"
    />

    <link rel = "stylesheet" href = "utilities.css" />
    <link rel = "stylesheet" href = "style.css" />
    <title>Just Project 1</title>
  </head>
  <body>
    <!-- Navbar -->
    <div class = "navbar">
      <div class = "container flex">
        <h1 class = "logo">AcademyOfCode</h1>
        <nav>
          <ul class = "nav-middle">
            <li>
              <a href = "#"
                >Catalog <ion-icon name = "caret-down-outline"></ion-icon
              ></a>
              <div class = "menu-sub">
                <div class = "menu-col-1">
                  <div class = "menu-sub-left">
                    <h3 class = "menu-category">Course recommendations</h3>
                    <p>Explore our paid or free courses</p>
                  </div>
                  <ul>
                    <li><a href = "">Python</a></li>
                    <li><a href = "">JavaScript</a></li>
                    <li><a href = "">Html</a></li>
                    <li><a href = "">CSS</a></li>
                    <li><a href = "">SQL</a></li>
                  </ul>
                  <ul>
                    <li><a href = "">C++</a></li>
                    <li><a href = "">Java</a></li>
                    <li><a href = "">PHP</a></li>
                    <li><a href = "">C#</a></li>
                    <li><a href = "">R</a></li>
                  </ul>
                </div>
              </div>
            </li>
            <li>
              <a href = "#"
                >Pricing <ion-icon name = "caret-down-outline"></ion-icon
              ></a>
              <div class = "menu-sub">
                <div>
                  <ul>
                    <li><a href = "">For students</a></li>
                    <li><a href = "">For individuals</a></li>
                    <li><a href = "">For teams</a></li>
                  </ul>
                </div>
              </div>
            </li>
            <li>
              <a href = "#"
                >Community <ion-icon name = "caret-down-outline"></ion-icon
              ></a>
              <div class = "menu-sub">
                <div>
                  <ul>
                    <li><a href = "">Discord</a></li>
                    <li><a href = "">Twitter</a></li>
                    <li><a href = "">Instagram</a></li>
                    <li><a href = "">YouTube</a></li>
                    <li><a href = "">Github</a></li>
                  </ul>
                </div>
              </div>
            </li>
          </ul>
        </nav>
        <nav>
          <ul class = "nav-right">
            <li>
              <a class = "btn btn-outline" href = "#">Login</a>
            </li>
            <li><a class = "btn" href = "#">Sign Up</a></li>
          </ul>
        </nav>
      </div>
    </div>

    <!-- Showcase -->
    <section class = "showcase">
      <div class = "container">
        <div class = "showcase-text text-center">
          <h1 class = "xl">AcademyOfCode empowers you to build tech fluency</h1>
          <p class = "mdm">Build your tech skill here with CodeOfAcademy</p>
          <div class = "grid">
            <div>
              <a href = "#" class = "btn btn-primary">Get Started</a>
            </div>
            <div>
              <a href = "#" class = "btn btn-outline">Learn to Code</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  </body>
</html>

Я хочу, чтобы эти две кнопки находились в центре медиа-запросов. Я пробовал использовать justify-self: center, но это не сработало.

html css media-queries css-grid

30.05.2024 17:13

Улучшение производительности загрузки с помощью 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 страниц, которые помогут...

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

Ответы 1

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

Проблема в вашем коде заключается в том, что вы пытаетесь применить justify-self: center к тегам a напрямую, тогда как его следует применять непосредственно к элементам сетки. Кроме того, вы поместили кнопки внутри элемента div, который является элементом сетки.

Настройте свой медиа-запрос следующим образом и убедитесь, что он работает:

@media (max-width: 768px) {
  .showcase {
    height: auto;
  }

  .grid,
  .showcase .grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }

  .showcase .grid div {
    justify-self: center;
  }
}

Здесь мы настраиваем grid-template-columns и grid-template-rows на 1fr и auto auto соответственно, чтобы гарантировать, что каждый контейнер кнопок занимает всю ширину и выравнивается по центру. Мы также применяем justify-self: center к контейнерам div в сетке, чтобы выровнять кнопки внутри этих контейнеров по центру.

30.05.2024 17:25

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

CSS Animation-Iteration-Count путается с режимом Animation-fill-mode

Вычислить положение точки вдоль края правильного многоугольника?

Изменить CSS только для уведомления о новом заказе WooCommerce, отправленного администраторам

Ошибка: неверный CSS после «...m 55% справа»

Как сделать так, чтобы градиент сливался с панелью навигации, а не «всплывал» при изменении цвета?

Используйте псевдокласс not для стилизации всех элементов, кроме того, который является дочерним по отношению к определенному

Как сделать меню с окантовкой активного пункта только с 3-х сторон?

Как расположить элемент HTML-диалога внизу страницы на всю ширину?

Отображение 4 изображений в каждой строке для двух строк при использовании Javascript For Loops для написания кода HTML и CSS

JavaFX Scene Builder: как установить цвет текста в ComboBox?

Почему я не могу центрировать кнопку в медиа-запросах

Ответы 1

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

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