リンク（ボタン）をページ中央に配置するにはどうすればいいですか？

ボタンを中央に配置したいと思います。私は使用しようとしましたリンク（ボタン）をページ中央に配置するにはどうすればいいですか？

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

は、ここでは、コードです。あなたの部門がボディ幅の100％を使用していたので、マージン0 autoは機能しませんでした。 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

リンク（ボタン）をページ中央に配置するにはどうすればいいですか？

答えて

関連する問題