아무래도 7note입니다. 의사 요소로 텍스트 옆에 아이콘을 붙이면 미묘하게 위치가 어긋나 버리는 경우의 대처법에 대해 해설

이와 같이, 텍스트의 앞에 아이콘을 붙이면 미묘하게 어긋나 버리는 경우에, 좋은 느낌에 상하 중앙에 가져가는 방법을 해설합니다.

"조금 어긋나 버린 예"

출처

index.html

<p>テキスト</p>

style.css

p::before {
  content: '';
  width: 16px;
  height: 16px;
  background: url(icon.png) no-repeat;
  margin-right: 10px;
  display: inline-block;
  transform: translateY(3px); /* 上下方向の位置を微調整する */
}

해설

상하 방향으로 어긋남이 일어나므로 transform: translateY() 를 사용하여 상하 위치를 조정합니다.
그게 다야, 간단합니다.

요약

position 지정으로 위치를 상대 위치로 지정하는 방법도 있습니다만, 단순히 텍스트 앞에 아이콘을 설치하는 것만으로는, before를 사용한 이번의 방법이 제일 간단할까라고 생각합니다.
img로 해서 이미지로 설치하는 방법도 있습니다만, 개인적으로는 의사 요소를 사용한 이 수법을 추천합니다. HTML이 깔끔하기 때문에.

소마츠!

~ Qiita에서 매일 게시 중!! ~
【초보자용】WEB 제작의 조금 테크 모임