Кнопка не центрируется

Итак, после бог знает скольких попыток моя кнопка вообще не будет выравниваться по центру!

.button {
    width: 340px;
    height: 70px;
    background-color: #84705C;
    font-family: 'Fredoka', sans-serif;
    border-radius: 8px;
    border: 0px;
    font-size: 50px;
    color: #FFFFFF;
    text-align: center;
    animation-name: buttonoutofhover;
    margin: auto;
    display: inline-block;
}

Я также пробовал margin-left и margin-right как способ установить auto. Любая помощь, пожалуйста? Я просто использовал основные теги. Если это работает для вашего кода, извините за потраченное время, но, похоже, это не для моего. (также пробовал с анимацией и без, тоже самое)

PS: только что попробовал еще раз на пустой HTML-странице, все то же самое. А так же убрал display:inline-block так как он был не нужен.

— 18.03.2022 17:39

Вы хотите сосредоточить его на конкретном div или просто на странице

— 18.03.2022 17:45

@Bingus My Beloved, пожалуйста, поделитесь html тоже

— 18.03.2022 17:45

<!DOCTYPE HTML> <html> <link rel = "stylesheet" href = "items.css"> <button class = "button">Тестовая страница</button> </html>

— 18.03.2022 21:58

@ManuJanardhanan, держи!

— 18.03.2022 21:58

css

18.03.2022 17:37

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

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

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

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

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

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

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

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

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

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

Ответы 2

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

Вы можете обернуть кнопку внутри другого div: например. «кнопка-обертка». Примените «display: flex» к этой оболочке, а затем используйте «margin-left: auto, margin-right: auto» в классе кнопок.

Также убедитесь, что ваша кнопка имеет класс «кнопка», так как вы ссылаетесь на класс вместо элемента html внутри вашего файла css. Проверьте фрагмент кода ниже:

<!DOCTYPE html>
<html lang = "en">
  <head> </head>
  <body>
    <style>
      .button {
        width: 340px;
        height: 70px;
        background-color: #84705c;
        font-family: "Fredoka", sans-serif;
        border-radius: 8px;
        border: 0px;
        font-size: 50px;
        color: #ffffff;
        text-align: center;
        animation-name: buttonoutofhover;
        margin-left: auto;
        margin-right: auto;
      }
      .button-wrapper {
        display: flex;
      }
    </style>
    <div class = "button-wrapper">
      <button class = "button">Button</button>
    </div>
  </body>
</html>

Даже в превью все заработало, спасибо большое, вроде заработало!

— 18.03.2022 21:59

18.03.2022 17:45

Поэтому, если вы хотите сделать это, просто используйте сетку отображения с размещением элемента в центре. Только коротко и просто.

.button {
    width: 340px;
    height: 70px;
    background-color: #84705C;
    font-family: 'Fredoka', sans-serif;
    border-radius: 8px;
    border: 0px;
    font-size: 50px;
    color: #FFFFFF;
    text-align: center;
    animation-name: buttonoutofhover;
    margin: auto;
    display: grid;
  place-items: center;
}