前提
Font Awesomeを使用したボタンを作っています。
サンプル
ボタンは、
・button
タグ
・input
タグ(チェックボックス)
・a
タグ
以上の3種で構成されています。
発生している問題
・input
タグ
・a
タグ
以上の2種のボタンが、
・アイコンがY軸の中央に配置できていない
・ボタンのサイズがbutton
タグのボタンのサイズに比べて大きい
実現したいこと
・input
タグとa
タグのボタンのアイコンをY軸の中央に配置したい
・input
タグとa
タグのボタンのサイズを、button
タグのボタンのサイズと同じサイズにしたい
該当のソースコード
CSS
1.buttons { 2 display: inline-block; 3 cursor: pointer; 4 text-align: center; 5 vertical-align: middle; 6 border: solid .5em black; 7 background-color: white; 8 width: 5em; 9 height: 5em; 10 margin: 0 1%; 11 overflow: hidden; 12} 13 14#css{ 15 display: none; 16}
HTML
1<body> 2 <button class="buttons"><i class="fab fa-html5 fa-3x"></i></button> 3 <label for="css" class="buttons"> 4 <i class="fab fa-css3-alt fa-3x"></i> 5 <input type="checkbox" id="css"> 6 </label> 7 <button class="buttons"><i class="fab fa-js-square fa-3x"></i></button> 8 <label for="python" class="buttons"> 9 <a id="python"><i class="fab fa-python fa-3x"></i></a> 10 </label> 11</body>
試したこと
HTML CSS、ボタンの文字を真ん中に表示したい
上記投稿の回答を見ると、padding: 0;
を設定することで解決しているように見受けられたので、.buttons
にpadding: 0;
を設定してみましたが、状況は変わりませんでした。
回答1件
あなたの回答
tips
プレビュー