1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <style> /* CSS로 가변폭 가운데 정렬 CSS에서 block 요소의 정렬은 block 요소에 width값을 지정하고 좌우 margin을 auto로 줘서 정렬을 한다. 만약 block 요소의 width값을 미리 알 수 없을 때 어떻게 가운데 정렬을 할 수 있을까?? display: inline-block을 사용 */ #container { text-align:center; } .box { display:inline-block; height: 200px; width:200px; background: skyblue; } </style> </head> <body> <div id="container"> <div class="box"> </div> </div> </body> </html> |
반응형
'CSS' 카테고리의 다른 글
| [CSS] nth-child (n번째 부터 n번째 까지 css적용) (3) | 2016.07.05 |
|---|---|
| [CSS] 2단 레이아웃 화면 100% 유지 (0) | 2016.07.04 |
| [CSS] 스크롤바 왼쪽에 위치하게 (0) | 2016.06.28 |
| [CSS] 삼각형 만들기 (1) | 2016.06.22 |
| [CSS] 아이콘, 텍스트 수직 수평 정렬 (1) | 2016.06.09 |
