text-align2 HTML/CSS] 이미지(img) 가운데 정렬 이미지(img) 가운데 정렬 ① text-align ②margin auto ③vertical-align 웹페이지를 만들다보면 이미지(img)를 가운데 정렬하고 싶을 때가 있습니다. 이미지를 가운데 정렬하는 방법은 많은데요. 저는 이번에 ① text-align과 ②vertical-align으로 가운데 정렬을 해보겠습니다. ① text-align img는 텍스트처럼 다뤄지기 때문에 text-align으로 조절이 가능합니다. 태그의 부모태그인 태그에 text-align:center를 적용하면 이미지를 가운데 정렬할 수 있습니다. img{ height: 150px; } div{ text-align: center; } ㄱ ②margin left/right: auto 제가 정말 많이 쓰는 방법인데요 ㅎㅎ 그냥 im.. 2021. 7. 7. HTML/CSS] 가운데 정렬이 안된다고? text-align을 이용해서 모든 글자(text)를 중앙배열 시켜보자. 가운데 정렬을 하기 위해서 모든 태그의 스타일에 'text-align : center'를 적용하자. 오잉? 아래를 보면 모든 태그를 center로 맞추었는데, 이상하게 a태그는 중앙 배열이 되지 않는걸 볼 수 있다. 왜그럴까? F12를 눌러서 개발자 모드로 들어가자. 좌측 상단의 화살표를 클릭해서 태그에 갖다대자. 그러면 태그가 적용되는 범위를 박스로 확인할 수 있다. h1태그 p태그 div태그 a태그 a 태그만 영역이 글자가 있는 구역만 해당된 다는 것을 알 수 있다. 이럴때는 div태그 같이 한 줄 전체를 영역으로 인식하는 태그로 감싸주면 된다 짜잔~ 가운데 정렬이 된 걸 확인할 수 있다 :) 2021. 5. 10. 이전 1 다음
