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

goto_jp 393views 更新:2014年6月10日

サンプルはこちら。

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>タグは左右いっぱいに広がるという寸法です。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません