@danteasy

Почему не работает margin?

Вообщем-то, поместил ссылку внутрь контейнера, хочу выровнять текст по центру относительно контейнера, в который я его вложил. Написав css: margin-left, right: auto для ссылки, она почему-то не центрируется, а находится в начале контейнера
<div class="container">
        <p class="dev">Данный раздел находится в разработке</p>
        <a class="go-back" href="index.html">← предыдущая страница</a>
    </div>
</body>
</html>
.
.container {
    margin-right: auto;
    margin-left: auto;
    margin-top: 350px;
    max-width: 1200px;
    border: 1px solid white;
}

.dev {
    color: white;
    margin-left: auto;
    margin-right: auto;
    font-size: 45px;
    text-align: center;
}

.go-back {
     font-size: 25px;
     text-transform: uppercase;
     margin-right: auto;
     margin-left: auto;
     border: 1px solid white;
     text-decoration: none;
     color: orange;
     transition: .5s;
}

.go-back:hover {
    border-bottom: 1px white solid;
}

617aee06bc281865887347.png
  • Вопрос задан
  • 794 просмотра
Решения вопроса 2
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Потому что она не блочная и не имеет ширины.

Вот так сработает
a {
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}


Либо просто задайте контейнеру text-align: center

И еще пачка способов по запросу "горизонтальное выравнивание css"
Ответ написан
Aetae
@Aetae
Тлен
Ссылка не просто block - а inline-blockinline, для таких элементов действую правила текста(inline), соответственно margin: auto равен нулю.
Если же вы поменяете display на block, то, как блочный элемент, ссылка займёт всю ширину, и опять же margin: auto равен нулю.)

Решения:
а) text-align: center контейнеру, чтоб центрировать текст а вместе с ним и inline элементы.
б) display: block и text-align: center самой ссылке чтоб центрировать текст внутри неё.
с) перейти на flex.
...
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы