vertical-align2 HTML/CSS] vertical-align으로 수직 정렬하기 vertical-align 속성은 수직 정렬을 지정하는 속성입니다. 수직 정렬을 해야하기 때문에 inline이나 inline-block 또는 table-cell 엘리먼트에만 적용됩니다. block에는 쓸 수 없다는 건 안 비밀~ 먼저 간단하게 표를 이용해서 기준선을 옮겨 보겠습니다. 대표적인 기준선은 다음과 같습니다. baseline 셀의 기준 선에 내용의 기준선을 맞춤 top 패딩의 위쪽에 내용의 기준선을 맞춤 middle 패딩의 중앙에 내용의 기준선을 맞춤 bottom 패딩의 아래쪽에 내용의 기준선을 맞춤 vertical-align의 기본값은 baseline입니다. baseline으로 해주면 부모의 기준선에 맞추어서 해당 엘리먼트의 기준선을 정렬해줍니다. TEST TEST TEST TEST table.. 2021. 8. 19. 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. 이전 1 다음
