CSSを使用してボタンの中心を合わせるにはどうすればよいですか？

私は単純なWebページにボタンを追加しようとしています。ボタン自体はすばらしいですが、私はそれをどのように配置するかについてはあまりよく分かりません。私はそれが中心に置かれ、本文の下に配置されることを望みます。現在、左側に座っています。どのように行うにはどのようなアイデアですか？CSSを使用してボタンの中心を合わせるにはどうすればよいですか？

<!DOCTYPE html> 
<html lang=""> 

<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<link rel="stylesheet" type="text/css" href="spiekermann.css"> 
<title></title> 

<style> 

    #logo { 
     width: 100%; 
     text-align: center; 
     padding: 10em 0 0.2em 0; 
     font-family: lato; 
    } 

    #sub { 
     color: #fff; 
     font-family: lato; 
     text-align: center; 
     word-spacing: 5em; 
    } 

    .button { 
     background-color: #3b3d45; 
     border: 6px solid #fff080; 
     display: inline-block; 
     cursor: pointer; 
     color: #ffffff; 
     font-family: Arial; 
     font-size: 12px; 
     padding: 15px 20px; 
     text-decoration: none; 
     margin: auto; 
     text-align: center; 
    } 

    .button:hover { 
     background-color: #707488; 
    } 
</style> 
</head> 

<body> 
<div class id="logo"> 
    <h1>ERIK SPIEKERMANN</h1> 
</div> 
<div class id="sub"> 
    <p>Designer Typographer Entrepreneur </p> 
</div> 

<a href="#" class="button">Learn More</a> 
</body> 

</html>

ご協力いただければ幸いです。ありがとう！

出典

2016-04-20 Sulfater

ボタンにコンテナを追加し、中央に合わせることができます。以下の例を参照してください。スタイルを作成しようとしているときにも

できるだけ再利用可能にしてください。これの利点の1つは、より少ないCSSを書くことができることです。

#logo { 
 
    width: 100%; 
 
    text-align: center; 
 
    padding: 10em 0 0.2em 0; 
 
    font-family: lato; 
 
} 
 

 
#sub { 
 
    color: #fff; 
 
    font-family: lato; 
 
    text-align: center; 
 
    word-spacing: 5em; 
 
} 
 

 
.button { 
 
    background-color: #3b3d45; 
 
    border: 6px solid #fff080; 
 
    display: inline-block; 
 
    cursor: pointer; 
 
    color: #ffffff; 
 
    font-family: Arial; 
 
    font-size: 12px; 
 
    padding: 15px 20px; 
 
    text-decoration: none; 
 
    margin: auto; 
 
    text-align: center; 
 
} 
 

 
.button:hover { 
 
    background-color: #707488; 
 
} 
 
.text-center { 
 
    text-align: center; 
 
}

<div class id="logo"> 
 
    <h1>ERIK SPIEKERMANN</h1> 
 
</div> 
 
<div class id="sub"> 
 
    <p>Designer Typographer Entrepreneur </p> 
 
</div> 
 
<div class="text-center"> 
 
    <a href="#" class="button">Learn More</a> 
 
</div>

出典

2016-04-20 00:34:08

-1

<!DOCTYPE html> 
<html lang=""> 

<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<link rel="stylesheet" type="text/css" href="spiekermann.css"> 
<title></title> 

<style> 

    #logo { 
     width: 100%; 
     text-align: center; 
     padding: 10em 0 0.2em 0; 
     font-family: lato; 
    } 

    #sub { 
     color: #fff; 
     font-family: lato; 
     text-align: center; 
     word-spacing: 5em; 
    } 

    .button { 
     background-color: #3b3d45; 
     border: 6px solid #fff080; 
     display: inline-block; 
     cursor: pointer; 
     color: #ffffff; 
     font-family: Arial; 
     font-size: 12px; 
     padding: 15px 20px; 
     text-decoration: none; 
     margin: auto; 

    } 

    .button:hover { 
     background-color: #707488; 
    } 
    #button { 
     text-align: center; 
    } 
</style> 
</head> 

<body> 
<div class id="logo"> 
    <h1>ERIK SPIEKERMANN</h1> 
</div> 
<div class id="sub"> 
    <p>Designer Typographer Entrepreneur </p> 
</div> 
<div class id="button"> 
    <a href="#" class="button">Learn More</a> 
</div> 
</body> 

</html>

どのようにあなたがこの方法だと思いますか？

出典

2016-04-20 00:34:41 Pino

はあなたが必ずしもコンテナを必要としない<div>にボタンを入れてみてくださいとtext-align:center

<div class="btnContainer "> 
    <a href="#" class="button">Learn More</a> 
</div> 

<style> 
    .btnContainer { 
     text-align:center; 
    } 
</style>

出典

2016-04-20 00:35:01 MrWitts

を作ります。以下を試してください：

.button { 
    background-color: #3b3d45; 
    border: 6px solid #fff080; 
    display: block; 
    cursor: pointer; 
    color: #ffffff; 
    font-family: Arial; 
    font-size: 12px; 
    padding: 15px 20px; 
    text-decoration: none; 
    margin: auto; 
    text-align: center; 
    width: 62px; 
}

自動余白はインラインブロック要素には適用されません。トリックを行います.buttonに次のルールを追加し、余分なマークアップなし

出典

2016-04-20 00:35:35 brut

left: 50%; 
position: absolute; 
transform: translate(-50%, 0);

出典

2016-04-20 00:37:56 potatopeelings

CSSを使用してボタンの中心を合わせるにはどうすればよいですか？

答えて

関連する問題