57947


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

[code]

    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;
    }
[/code]

[code]

    <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>
[/code]

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


CC BY-SA 4.0
2019-09-09T06:48:58.240
57945
2019-09-09T08:18:41.813
35433
question
html css
横並びのアイコンの縦位置を中央揃えにしたい


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

> ## § 9.5. Main-Axis Alignment[[1]](https://www.w3.org/TR/css-
> flexbox-1/#main-alignment)
>
>   12. **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]](https://www.w3.org/TR/css-
> flexbox-1/#cross-alignment)
>
>   13. **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`
を設定することで、アイコンを交叉軸で中央に配置することが出来ます。

[code]

    i.icons {
      display: flex; /* 追記 */
      font-size: 40px;
      width: 80px;
      height: 80px;
      border: 2px solid black;
      vertical-align: middle;
    }
    
    i.icons::before {
      margin: auto; /* 追記 */
    }
    
[/code]

[code]

    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;
    }
[/code]

[code]

    <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>
[/code]

* * *

なお、 Internet Explorer 11 では、上記コードは動作しません。なぜならば、 IE11 は flex
アイテムをブロック化せず[[3]](https://github.com/philipwalton/flexbugs#flexbug-12)、交叉軸における
`margin: auto`
は動作しない[[4]](https://github.com/philipwalton/flexbugs#flexbug-15)ためです。そのため、
IE11 を考慮する場合、 CSS は以下のようになります。

[code]

    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; /* 追記 */
    }
    
[/code]

[code]

    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;
    }
[/code]

[code]

    <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>
[/code]

* * *

参考:

  1. [CSS Flexible Box Layout Module Level 1](https://www.w3.org/TR/css-flexbox-1/)
  2. [GitHub - philipwalton/flexbugs: A community-curated list of flexbox issues and cross-browser workarounds for them.](https://github.com/philipwalton/flexbugs)


CC BY-SA 4.0
2019-09-09T07:29:55.693
57947
2019-09-09T08:18:41.813
2019-09-09T08:18:41.813
32986
32986
57945
answer