Inline-block, Align

| 2017. 11. 10. 03:48

◎ Inline-block

- like inline elements but they can have a width and a height

- inline-block을 사용하면 자동으로 margin과 같은 gap이 생긴다

◎ Align

> center alignment

- margin: auto;

- horizontally center a block element (ex. <div>)

- must specified width: 이게 안 되면 center가 적용되지 않음

- block 자체를 중앙 정렬

- text-align: center;

- inside text: block 안의 요소를 중앙 정렬

- img { display: block; width: 40%; margin: auto; }

- inline 요소를 block으로 변경한 후에 margin: auto; 를 적용시킴

> left / right alignment

- position: absolute;

- must specified width

- absolute positioned elements are removed from the normal flow, and can overlap elements

- note) positioning을 통하여 정렬을 하고자 할 때, <body>의 margin, padding을 0으로 만들고 해야한다.

(각 브라우저마다 차이가 없도록 하기 위해서)

- note) IE8 and earlier: right side 17px의 여백이 있기 때문에 scrollbar가 생길 수 있다.

- !DOCTYPE을 사용해서 position을 적용해야함

- float: left / right;

- 위의 note)의 내용과 일치함

> vertical alignment

- padding: 50px 0px;

- top, bottom의 padding이 같기 때문에 수직 정렬이 됨

- padding: 50px 0px; + text-align: center; > 중앙 정렬

- line-height: height와 동일한 값

- if the text has multiple lines

- p { line-height: 1.5; display: inline-block; vertical-align: middle; }

- line-height: normal(1.2, default), number(1,2,3), length(15px), %(120%)

- number로 value값을 지정하는 것이 가장 좋은 방법

- 기본 폰트 사이즈 16px, line-height: 120%인 경우 > 16px * 120% = 19.2px

- transform: (-50%, -50%);

저작자표시 (새창열림)

UBANGE