본문 바로가기

div수직정렬2

아이템(div) 수직/수평 정렬, 줄바꿈 여부 설정하기 - flex container 속성(1) flex css 제 2탄! 오늘은 flex container에 사용할 수 있는 속성 중에서 item(div)을 수직/수평 정렬하는 방법에 대해 소개하려고 한다. 더해서 브라우저 사이즈에 따라 줄바꿈 여부를 결정하는 css도 함께 알아두면 도움이 될 것이다. flex-direction item을 수평(가로) 정렬할 것인지, 수직(세로) 정렬할 것인지 결정하는 css 이다. .flex_container{ flex-direction: row; /* 기본값, 아이템을 왼쪽에서 오른쪽으로 수평 정렬함 */ flex-direction: row-reverse; /* 아이템을 오른쪽에서 왼쪽으로 수평 정렬함 */ flex-direction: column; /* 아이템을 위에서 아래로 수직 정렬함 */ flex-dire.. 2020. 11. 6.
스타일시트 vertical-align 사용해서 <div> 수직 정렬하기 vertical-align은 inline 또는 table-cell에서 수직 정렬을 지정해주는 css 속성이다. 속성값은 아래와 같다. vertical-align: baseline; /* 부모 baseline에 맞추어 해당 요소의 baseline을 정렬 */ vertical-align: sub; /* 해당 요소의 baseline을 부모의 아래첨자 기준에 맞추어 정렬 */ vertical-align: super; /* 해당 요소의 baseline을 부모의 위첨자 기준에 맞추어 정렬 */ vertical-align: text-top; /* 해당 요소 상단을 부모 요소 폰트의 상단에 맞추어 정렬 */ vertical-align: text-bottom; /* 해당 요소 하단을 부모 요소 폰트의 하단에 맞추어 정렬.. 2020. 10. 17.