§ 9.5. Main-Axis Alignment[1][1]
§ 9.6. Cross-Axis Alignment[2][2]
これを利用してそのため、 i
要素を flex コンテナに設定した上で、 before
擬似要素の margin
プロパティに対してに auto
を設定することで、以下のようアイコンを交叉軸で中央に行う配置することが出来ます。
i.icons {
display: flex; /* 追記 */
font-size: 40px;
width: 80px;
height: 80px;
border: 2px solid black;
vertical-align: middle;
}
i.icons::before {
margin: auto; /* 追記 */
}
html {
text-align: center;
}
/* リセット */
button {
background: none;
border: 0;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
#a,
#d {
display: none;
}
ul {
display: inline-flex;
}
.buttons {
margin: 0 1em;
cursor: pointer;
display: inline-block;
}
i.icons {
display: flex; /* 追記 */
font-size: 40px;
width: 80px;
height: 80px;
border: 2px solid black;
vertical-align: middle;
}
i.icons::before {
margin: auto; /* 追記 */
}
.check:checked+i {
color: red;
border: 2px solid red;
}
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<nav id="buttonWrap">
<ul id="list">
<li>
<label for="a" class="buttons">
<input type="checkbox" id="a" class="check">
<i class="fas fa-check icons"></i>
<p>A</p>
</label>
</li>
<li>
<button class="buttons">
<i class="fas fa-check icons"></i>
<p>B</p>
</button>
</li>
<li>
<button class="buttons">
<i class="fas fa-check icons"></i>
<p>C</p>
</button>
</li>
<li>
<label for="d" class="buttons">
<input type="checkbox" id="d" class="check">
<i class="fas fa-check icons"></i>
<p>D</p>
</label>
</li>
</ul>
</nav>
html {
text-align: center;
}
/* リセット */
button {
background: none;
border: 0;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
#a,
#d {
display: none;
}
ul {
display: inline-flex;
}
.buttons {
margin: 0 1em;
cursor: pointer;
display: inline-block;
}
i.icons {
display: flex; /* 追記 */
font-size: 40px;
width: 80px;
height: 80px;
border: 2px solid black;
vertical-align: middle;
}
i.icons::before {
margin: auto; /* 追記 */
}
.check:checked+i {
color: red;
border: 2px solid red;
}
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<nav id="buttonWrap">
<ul id="list">
<li>
<label for="a" class="buttons">
<input type="checkbox" id="a" class="check">
<i class="fas fa-check icons"></i>
<p>A</p>
</label>
</li>
<li>
<button class="buttons">
<i class="fas fa-check icons"></i>
<p>B</p>
</button>
</li>
<li>
<button class="buttons">
<i class="fas fa-check icons"></i>
<p>C</p>
</button>
</li>
<li>
<label for="d" class="buttons">
<input type="checkbox" id="d" class="check">
<i class="fas fa-check icons"></i>
<p>D</p>
</label>
</li>
</ul>
</nav>
なお、 Internet Explorer 11 では、上記コードは動作しません。なぜならば、 IE11 は flex アイテムをブロック化せず[3]、交叉軸における margin: auto
は動作しない[4]ためです。そのため、 IE11 を考慮する場合、 CSS は以下のようになります。
i.icons {
display: -ms-flexbox;
display: flex; /* 追記 */
-ms-flex-align: center;
align-items: center; /* 追記 */
font-size: 40px;
width: 80px;
height: 80px;
border: 2px solid black;
vertical-align: middle;
}
i.icons::before {
display: block; /* 追記 */
margin: auto; /* 追記 */
}
html {
text-align: center;
}
/* リセット */
button {
background: none;
border: 0;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
#a,
#d {
display: none;
}
ul {
display: -ms-inline-flexbox;
display: inline-flex;
}
.buttons {
margin: 0 1em;
cursor: pointer;
display: inline-block;
}
i.icons {
display: -ms-flexbox;
display: flex; /* 追記 */
-ms-flex-align: center;
align-items: center; /* 追記 */
font-size: 40px;
width: 80px;
height: 80px;
border: 2px solid black;
vertical-align: middle;
}
i.icons::before {
display: block; /* 追記 */
margin: auto; /* 追記 */
}
.check:checked+i {
color: red;
border: 2px solid red;
}
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<nav id="buttonWrap">
<ul id="list">
<li>
<label for="a" class="buttons">
<input type="checkbox" id="a" class="check">
<i class="fas fa-check icons"></i>
<p>A</p>
</label>
</li>
<li>
<button class="buttons">
<i class="fas fa-check icons"></i>
<p>B</p>
</button>
</li>
<li>
<button class="buttons">
<i class="fas fa-check icons"></i>
<p>C</p>
</button>
</li>
<li>
<label for="d" class="buttons">
<input type="checkbox" id="d" class="check">
<i class="fas fa-check icons"></i>
<p>D</p>
</label>
</li>
</ul>
</nav>
参考: