이미지, 텍스트 수직으로 가운데 정렬하기
html)
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 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, height=device-height, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0"> <title>Insert title here</title> <style> /* 이미지, 텍스트를 담을 div에 line-height 속성을 준다 이미지 텍스트에 vertical-align: middle 속성을 준다 */ div { height: 200px; line-height: 200px; border: 1px solid; background: #DAD9FF; } /* vertical-align: baseline : 글자의 baseline에 맞춤 vertical-align: top : 부모요소의 상단에 맞춤 vertical-align: middle : 부모요소의 가운데에 맞춤 vertical-align: bottom : 부모요소의 하단에 맞춤 vertical-align: super : 부모요소의 위첨자에 맞춤 vertical-align: sub : 부모요소의 아래첨자에 맞춤 vertical-align: text-top : 부모요소의 글꼴 상단에 맞춤 vertical-align: text-bottom : 부모요소의 글꼴 하단에 맞춤 */ img.align { vertical-align: middle; } p { vertical-align: middle; } </style> </head> <body> <div> <img class="align" src="images/testimage.jpg" height="150px" /> </div> <div> <span>가나다라마바사아자차카타파하</span> </div> </body> </html> | cs |
결과
'IT > - 프로그래밍' 카테고리의 다른 글
| HTML5/CSS3 페이징 구성하기 (0) | 2017.06.04 |
|---|---|
| HTML5/CSS3 word-break, white-space : 줄바꿈 속성 (0) | 2017.06.03 |
| HTML5/CSS3 text-index : 글자 들여쓰기 (0) | 2017.06.01 |
| HTML5/CSS3 letter-spacing, word-spacing, line-height : 글자 간격 (0) | 2017.05.31 |
| HTML5/CSS3 @font-face : 폰트파일 사용하기 (0) | 2017.05.30 |