버티컬 얼라인
한 줄 안에서 세로 정렬이 된다. 그러므로 부모의 line-height를 부모의 height와 동일하게 맞춰주게 되면 자식이 세로 정렬된다.
1 2 3 4 5 6 7 8 9 10 11 | <!doctype html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <div class="wrapper"> <div class="box"></div> </div> </body> </html> | cs |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .wrapper{ background-color:mediumspringgreen; width:500px; height:400px; margin:0 auto; line-height:400px; } .box{ display:inline-block; width:200px; height:100px; background-color:green; vertical-align:middle; } | cs |
vertical-align middle을 하게 되면 line-height 기준이 아닌 font를 기준으로 가운데 정렬된다. font가 고정적이지 않으면 디자인이 무너짐.
vertical-align top으로 위에 붙여준다음 가운데에 오도록 margin-top을 조절해준다.
1 2 3 4 5 6 7 8 9 10 11 12 | <!doctype html> <html> <head> <link rel="stylesheet" href="style2.css"> </head> <body> <div class="wow"> <span class="text">Hello World</span> <span class="badge">Hi</span> </div> </body> </html> | cs |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | body{ background-color:azure; font-size:3em; } .wow{ background-color:firebrick; } .text{ background-color:blue; } .badge{ background-color:skyblue; font-size:0.3em; vertical-align:top; padding:0.2em 0.5em; display:inline-block; border-radius:30px; margin-top:1.3em; } | cs |
'CSS' 카테고리의 다른 글
| 오버플로우 overflow (0) | 2018.10.07 |
|---|---|
| 상속 inheritance (0) | 2018.10.07 |
| 마진 병합 margin collapsing (0) | 2018.10.07 |
| 라인 하이트 line-height (0) | 2018.10.07 |
| display (0) | 2018.10.07 |
