Блог

Главная - Вопросы по программированию - Как разместить мою ссылку (кнопку) в середине страницы?

Как разместить мою ссылку (кнопку) в середине страницы?

#html #css

#HTML #css

Вопрос:

Я хочу разместить свою кнопку посередине. Я попытался использовать

 margin: 0 auto;

но ничего не происходит. Код приведен ниже:

Почему margin: 0 автоматически; не работает?

 <!DOCTYPE html>
<html>
<head>
<style>
div {
    margin: 0 auto;  <!--Why margin: 0 auto; doesnt work?  -->
}
a:link, a:visited {
    background-color: #f44336;
    color: white;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}


a:hover, a:active {
    background-color: red;
}
</style>
</head>
<body>

<div><a href="https://www.google.com" target="_blank">This is a link</a></div>

</body>
</html>

Ответ №1:

Вот код. Поле 0 auto не работало, потому что ваш div использовал 100% ширины основного текста. как только вы установите значение меньше 100%, оно автоматически корректируется.

 body, html{
  width: 99%;  
}

div {
    margin: 0 auto;  
    width: 134px;
}
a:link, a:visited {
    background-color: #f44336;
    color: white;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}


a:hover, a:active {
    background-color: red;
}  
 <!DOCTYPE html>
<html>
<head>

</head>
<body>

<div><a href="https://www.google.com" target="_blank">This is a link</a></div>

</body>
</html>

отредактировал фрагмент

Комментарии:

1. Как ваше решение центрирует кнопку? Теперь вы можете прокручивать вбок, и останется больше свободного места.

2. отредактировал вырезанное. как это центрируется, уже объяснялось выше.