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

Question

[danteasy]

Вообщем-то, поместил ссылку внутрь контейнера, хочу выровнять текст по центру относительно контейнера, в который я его вложил. Написав 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;
}

Comments

[Антон Литвиненко]

Потому что display: inline у ссылки. Смените на блок

Answer 1

[Ankhena]

Потому что она не блочная и не имеет ширины.

Вот так сработает

a {
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

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

И еще пачка способов по запросу "горизонтальное выравнивание css"

Comments

[Ankhena]

p.s. а ещё расскажите, зачем вам анимировать ВСЕ свойства, если вы меняете нижний бордер с белого на белый?

[danteasy]

Ankhena, я хотел бордером подчёркивание текста при наведении сделать. в курсе. что можно и text-decoration-ом, но нужен был именно border. А кроме анимации я бордеры специально сделал, чтобы визуально видеть сами блоки, когда задавался вопросом, почему не работает маржа

[danteasy]

Ankhena, я не особо давно начал изучать вёрстку. Если уж речь пошла о анимации, то лучше выписать конкретно свойство, которое хочу анимировать и задать ему транзишн?

[Ankhena]

danteasy, а, просто вышло смешно ))
Старайтесь анимировать только те свойства, которые изменяются.
transition: border .5s;

[danteasy]

Ankhena, благодарю!

[Ankhena]

danteasy, если ответ может помочь в решении задачи, его принято помечать решением.
Можно отметить несколько ответов.
От этого плюсы всем.
Вам - вам охотнее станут помогать
Отвечающим - мелочь, а приятно
Другим ищущим - меньше читать, ведь вы уже отметили хорошие ответы.

[KQubs]

спасибо помогло!!!

Answer 2

[Aetae]

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

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

Comments

[Ankhena]

Ссылка не просто block - а inline-block

Ссылка не inline-block, ссылка просто inline

[Aetae]

Ankhena, =)
Да. Всё время забываю. Всё время. Это уже клиника\

[Ankhena]

Aetae, ага, мне тоже кажется, что такой диалог уже был :)
У меня тоже есть такие любимые грабли