🔰はじめての方へ

【CSS】リストの改行をそろえる、アイコンを画像にする、アイコンと文字の高さを揃える!

記事内に広告が含まれています。
スポンサーリンク

改行を揃える方法

これを

これにします。

/* リストの改行の位置をそろえる */
.list {
    margin-left: 2.3em;
	text-indent: -2.3em;
}

大きさは、アイコンの大きさによって調整します。

リストのアイコンを画像にする

.list::before {
    content:  ""; 
    width: 28px; 
    height: 27px; 
    display:  inline-block;
    background-image:  url("/img/○○"); 
    background-size: contain;    
    background-repeat: no-repeat;
    margin-right: 1px;
}

urlは、画像のパスにします。

アイコンと文字の高さを合わせる

設定していない際は、

こんな感じにずれてしまうことがあります。

.list::before {
  vertical-align: bottom;
}

「vertical-align」で高さを整えることができます!

少しのずれの時は、

vertical-align: -3px;

などで調整します。

コメント