Skip to Content
Go Back
안형우

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

📌 CSS가 어려운 이유 — 프로젝트 중심 실전 CSS 강의 소개 2023-04-13
📌 워드프레스, 답답한 빌더와 플러그인 대신 시원하게 커스터마징하기(강의) 2023-01-15
📌 아무도 말하지 않는 PHP의 좋은 점 2018-10-13
📌 유지보수하기 쉬운 CSS 전략(슬라이드) 2016-12-20
📌 워드프레스 테마에서 템플릿 파일 매칭 순서 2013-05-12
📌 [번역] CSS 코드 냄새 2013-01-01

img와 텍스트 높이 맞추기 : vertical-align 속성을 이미지에 걸어 주기

텍스트 사이에 이미지를 넣을 때 골치아픈 문제가 있다. 텍스트 높이와 이미지 높이를 같게 해도 이미지가 꼭 위로 튀어 올라가는 문제가 있다.

☝ 텍스트와 img를 그냥 한 줄에 넣으면 이렇게 높이가 어긋난다.

이 때 과거에 사용했던 속성은 <img align="absmiddle" src="…">(참고) 이었다고 한다. 그러나 align="absmiddle" 속성은 비표준이다.

따라서 앞으로는 css 속성인 vertical-align 을 사용하자.

vertical-alignimg에 걸어 줘야 한다. img의 부모에 걸어 줘 봤자 무용지물이다. 속성값은 여러 가지가 있는데, top, middle, bottom을 써 보면서 적당한 높이를 고르자. top을 썼더니 텍스트와 높이가 일치하는 것을 확인했다. 아래는 각각을 적용했을 때 결과다.

vertical-align: top

vertical-align: middle

vertical-align: bottom

참고: vertical-align은 오로지 inlinetable-cell 엘리먼트에만 적용된다.

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다