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 31 32 | <!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <style type="text/css"> #box { width: 400px; height: 100px; border: 1px solid #000; text-align: center; } .helper { display: inline-block; height: 100%; /* vertical-align은 다른 인라인 요소에 상대적으로 정렬한다. 그 상대적 정렬 기준역활을 하는 helper클래스를 이용했다. */ vertical-align: middle; } .txt { vertical-align: middle; } </style> </head> <body> <div id="wrapper"> <div id="box"> <span class="helper"></span><span class="txt">텍스트</span> </div> </div> </body> </html> |
.helper:before{
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
반응형
'CSS' 카테고리의 다른 글
| [CSS] background-image opacity - 배경이미지 투명도 적용하기 (2) | 2017.01.06 |
|---|---|
| [CSS] 텍스트 그라디언트 넣기 - css text color gradient (0) | 2017.01.05 |
| [CSS] attr - 요소의 속성값(텍스트)을 :before, :after content에 넣기 (0) | 2016.11.07 |
| [CSS] animation (0) | 2016.08.31 |
| [CSS] 테이블 상단 고정 스크롤 - fixed table header (2) | 2016.08.12 |
