반응형
html을 작성할 때 css를 이용해서 가운데 정렬하는 방법은 꽤 다양하다. 어떻게 작성하던지 상관없이 의도한 대로 가운데 정렬이 된다면 뭐든 일단 큰 문제가 아니다. 그런데 한 div 안에 img와 같은 특정 엘레멘트만 가운데 정렬하고 싶은 경우가 있다.
언제까지 text-align 만 사용할 것인가?
그렇다. html을 작성할 때 text-align 은 텍스트 정렬할 때만 사용하지 않고 div 내의 모든 엘레멘트를 가운데 정렬할 때도 이용된다. 그런데 언제까 text-align 만 사용할 것인가? text-align을 사용해 가운데 정렬하기 위해 새로운 div를 만들고 있었다면 이번 글을 통해 치트키 하나를 무조건 기억해 두자.
디스블록마영오토
이제부터 "디스블록마영오토" 아마 zyngirok에서 최초로 사용하는 말일 듯 싶다. 다시 말해 아무도 이렇게 외우지 않고 그럴 필요도 없긴 하다. 그런데 이렇게 고민한 만큼 이 글을 읽은 모든 사람은 다시는 이 공식을 잊지 않길 바란다. 한 엘레멘트만 독단적으로 가운데 정렬하기 위해선 그 엘레멘트를 블록으로 디스플레이 속성을 바꿔준 후 마진을 0과 auto로 설정해 주면 된다.
display: block;
margin: 0 auto;
그래서 display block에서 디블록 마진 0과 auto에서 마영오토. 기억하자 '디스블록마영오토'. 이 것만 기억하면 가운데 정렬이 더 이상 두렵지 않다.
반응형
'ICT > WEB - HTML & CSS' 카테고리의 다른 글
HTML | base64를 활용해 이미지 업로드 필요 없이 img 태그안에 이미지 정보 담는방법 (0) | 2023.02.08 |
---|---|
HTML | 링크 a 태그 새창 새탭에서 여는 방법 (0) | 2022.07.21 |
HTML | Input 숫자만 입력되게 하는 방법 (Feat. type="text") (0) | 2022.05.31 |
HTML | VSCode에서 Live Server 이용할 때 작업 폴더가 여러개 일 때 (0) | 2021.12.02 |
CSS Sass Compiler- VSCode에서 작업영역에 여러 폴더를 추가해서 사용할 때 scss savePath 설정하는 방법 (0) | 2021.12.01 |
댓글