[CSS]テキスト直前のアイコンの上下をそろえる

eh657883

はじめに

ulタグを書くと、「・」を要素の前に付与される。それと同じように何らかの画像や文字をテキストの直前に配置するサンプルを２つ記載する。

contentによる文字の位置調整

補正前
a {
  font-size: 2em;
  background-color: aquamarine;
  text-decoration: none;
  color: white;
}
a::before {
  content : "▼";
}

補正後

position:relativeにより、相対的な座標指定が可能になる。(微調整ができる。)

a::before {
 position: relative;
 top: -3px;
}

backgoroundによる画像の位置調整

画像を読み込む場合、background-positionによって、微調整することができる。

詳しい指定については（こちらのサイト）を参照。

p {
  font-size: 2em;
  background-color: aquamarine;
  text-decoration: none;
  color: white;
  text-align:right;
  width: 240px;
  /* ★ココがメイン★ */
  background: url("./ABC.png") no-repeat ;
  background-position-x: left;
  background-position-y: 15px;

}

 

コメントを残す