1

4つのアイコンを横に並べて、各アイコンをボーダーで囲っています。
また、アイコンはチェックボックスとボタンが混ざっています。
下記コードの下の「スニペッドを実行」を押すと、状態をご確認いただけます。
チェックボックスのアイコン(下記コードで言うとAとDのアイコン)はクリックすると色が変わります。

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;
}

.icons {
    font-size: 40px;
    width: 80px;
    height: 80px;
    border: 2px solid black;
    vertical-align: middle;
}

.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>

スニペッドを実行するとご確認いただけると思いますが、アイコンの縦位置が中央にありません。
アイコンの縦位置を中央に配置する方法をご教示いただけないでしょうか。

1 件の回答 1

3

flex アイテムの margin プロパティに対して auto を指定すると、その margin は flex コンテナ内の余白を占有するように拡張されます。

§ 9.5. Main-Axis Alignment[1]

  1. Distribute any remaining free space. For each flex line:
    1. If the remaining free space is positive and at least one main-axis margin on this line is auto, distribute the free space equally among these margins. Otherwise, set all auto margins to zero.
    2. Align the items along the main-axis per justify-content.

§ 9.6. Cross-Axis Alignment[2]

  1. Resolve cross-axis auto margins. If a flex item has auto cross-axis margins:
    • If its outer cross size (treating those auto margins as zero) is less than the cross size of its flex line, distribute the difference in those sizes equally to the auto margins.
    • Otherwise, if the block-start or inline-start margin (whichever is in the cross axis) is auto, set it to zero. Set the opposite margin so that the outer cross size of the item equals the cross size of its flex line.

そのため、 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>


なお、 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>


参考:

  1. CSS Flexible Box Layout Module Level 1
  2. GitHub - philipwalton/flexbugs: A community-curated list of flexbox issues and cross-browser workarounds for them.

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。