センター<a>タグ

Question

HTML

<a href="#" class="button blue">Apply Now</a> 

CSS

.button { 
    padding:1em; 
    text-align: center; 
    display:inline-block; 
    text-decoration: none !important; 
    margin:0 auto; 

    -webkit-transition: all 0.2s ease-in-out; 
    -moz-transition: all 0.2s ease-in-out; 
    -ms-transition: all 0.2s ease-in-out; 
    -o-transition: all 0.2s ease-in-out; 
    transition: all 0.2s ease-in-out; 
} 

こんにちは、

は、現在、私のボタンの問題を持ちます。私は自分の「a」タグを中央に置くことができたいと思っていますが、現時点では左側にしか固執しません。私は "display：block"を使ってみましたが、これはボタンが置かれているdivの全幅を占めるようにします。

ありがとうございます。

Answer 1

リンク

.button { 
 
    padding:1em; 
 
    text-align: center; 
 
    display:inline-block; 
 
    text-decoration: none !important; 
 
    margin:0 auto; 
 

 
    -webkit-transition: all 0.2s ease-in-out; 
 
    -moz-transition: all 0.2s ease-in-out; 
 
    -ms-transition: all 0.2s ease-in-out; 
 
    -o-transition: all 0.2s ease-in-out; 
 
    transition: all 0.2s ease-in-out; 
 
} 
 

 
.container{ 
 
    width: 100%; 
 
    text-align: center; 
 
}

<div class="container"> 
 
    <a href="#" class="button blue">Apply Now</a> 
 
</div>

Answer 2

使用テキスト中央揃えするためのdivを使用します。センターに。を親要素に配置して、その中のすべての子要素を中央揃えにします。それら（子要素）は、同じ要素のブロックレベル要素である必要はありません。あなたの質問は、ディスプレイ（ブロック、、タグ）を使用して、親divの全領域を占有したくないという懸念があります。

あなたは表示指定した場合でも、する必要はありません：あなたのタグのインラインブロックをしてテキスト整列して親の内部でそれをラップ：センター;、それはあなたの仕事を解決します。

上記の回答があなたの必要性に合わない場合は、margin-left：25％程度を使用することもできます。

これ以上のヘルプが必要な場合は、コードを自由に削除してください。

おかげで、
Yamanの