vertical-align

박은정·2021년 8월 4일
0

TIL

목록 보기
13/72
post-custom-banner

vertical-align

  1. inline 또는 table-cell 박스에서의 수직정렬하게 해준다
  2. 보통 이미지와 텍스트를 같은 요소에서 중앙으로 배치하도록 많이 사용된다
  3. 텍스트 요소에는 line-height 을 주고, img 태그에는 vertical-align: top 을 주면 원하는 대로 구현이 가능하다
img {
	width: 20px;
    height: 20px;
    verticle-align: top;
}

span {
	line-height: 20px;
}

table-cell 요소

display: table 을 사용한 요소는 <table> 요소처럼 보이고
display: table-cell을 사용한 요소는 <td> 요소처럼 보인다

profile
새로운 것을 도전하고 노력한다

0개의 댓글