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

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

margin: 0 auto;

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

Why does margin: 0 auto; doesnt work?

<!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>

источник

2016-10-04 stoicho184

Вот код. Граница 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>

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

источник

2016-10-04 17:29:25 Stormhashe

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

отредактировал отрезанный. как его центры уже объяснены выше. – Stormhashe

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

ответ

Смежные вопросы