スマホサイトに使える、リスト内アイコンの絶対中央配置

サンプルはこちら。

See the Pen nGroB by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

リスト1行の縦幅に固定値を設定せず、内容量に対して相対的にチェックボックスが中央配置されるよう組んでいます。

CSS(Sass)

Sassの記述ですが肝心の箇所のみ抜粋します。

.list {
  ～
  > li {
    position: relative;
    ～
  }
  .function {
    position: absolute;
    width: 40px;
    height: 100%;
    input {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 20px;
      height: 20px;
      margin: -10px 0 0 -10px;
    }
  }
  .function + a {
    margin-left: 40px;
  }
}

チェックボックスやアイコンを入れるリスト左端の箇所を「.function」と定義しています。

親となる<li>にはrelativeをかけ、.functionはabsoluteをかけます。横幅と縦幅の指定もしておきます。

そして.functionの中の絶対中央配置したい要素もabsoluteをかけ、topとleftへ50%のネガティブマージンと、中央配置の手法を設定します。

最後に「.list .function + a」のスタイル指定により、.functionがあれば<a>タグに左マージンを付けるので、.functionが無い場合なら<a>タグは左右いっぱいに広がるという寸法です。