Q&A
<btn>タグ内の<p>が上下左右真ん中にきません
（左右は真ん中なのですが・・・）
解決方法ご教示ください！！
HTML
1 <div class="btn"> 2 <a href="#" class="btn more"><p>View more</p></a> 3 </div>
CSS
1.more { 2 width:235px; 3 height:60px; 4 font-size:16px; 5 text-decoration:none; 6 display:block; 7 text-align:center; 8 margin: 0 auto; 9 color:#171717; 10 background-color:#F7D43F; 11 border-radius:30px; 12 box-shadow: 0 0 14px 4px rgba(0, 0, 0, 0.5); 13 14}
回答2件
0
Flexboxを使って解決することもできます。
この方法なら、ボタンの横幅と高さが変わっても常に中央に配置されます。
aタグ単体でもボタンとしての表示は再現できるので、最小のソースを記載致します。
html
1<a href="#">View more</a>
css
1a { 2 display: flex; 3 justify-content: center; 4 align-items: center; 5}
あとは適宜、ボタンと文字の大きさや色をご指定ください。
投稿2020/08/20 22:35
総合スコア132
0
ベストアンサー
line-height: 60px;
heightで指定した分line-heigthを確保してあげれば上下真ん中にきます
投稿2020/08/20 22:09
総合スコア311
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。