개발자의 끄적끄적

[html/css] CSS로 이미지 세로 중앙 정렬(Vertical align)하기 [펌] 본문

개발/html & css

[html/css] CSS로 이미지 세로 중앙 정렬(Vertical align)하기 [펌]

효벨 2020. 10. 8. 02:00
728x90
반응형

[html/css] CSS로 이미지 세로 중앙 정렬(Vertical align)하기 [펌]

 

HTML에서 <img>를 CSS만으로 비율을 유지한 채로 특정 영역의 중앙에 출력하는 방법은 다음과 같다.

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style type="text/css">
        /* 예시를 위한 css */
        dl { float:left; margin-right:20px; }
        dt { clear:both; }
        dd { margin:0 0 20px 0; padding:10px; float:left; }
        dd > img,
        dd > div { border:#ccc solid 1px; float:left; margin-right:10px; }
        /* position 을 이용한 방법 */
        div.box1 {
            position:relative;
            width:150px; height:200px;
        }
        div.box1 > img {
            position:absolute;
            max-width:100%; max-height:100%;
            width:auto; height:auto;
            margin:auto;
            top:0; bottom:0; left:0; right:0;
        }
        /* line-height 를 이용한 방법 */
        div.box2 {
            width:150px; height:200px; line-height:200px;
            text-align:center;
        }
        div.box2 > img {
            max-width:100%; max-height:100%;
            vertical-align:middle;
        }
        /* :before / content 를 이용한 방법 */
        div.box3 {
            width:150px; height:200px;
            text-align:center;
            white-space:nowrap;
            font:0/0 a;
        }
        div.box3:before {
            content:"";
            display:inline-block;
            vertical-align:middle;
            height:100%;
        }
        div.box3 > img {
            max-width:100%; max-height:100%;
            display:inline-block;
            vertical-align:middle;
        }
        /* flex 를 이용한 방법 */
        div.box4 {
            width:150px; height:200px;
            display:flex;
            justify-content:center;
            align-items:center;
        }
        div.box4 > img {
            max-width:100%; max-height:100%;
        }
    </style>
</head>
<body>
<dl>
    <dt>position 을 이용한 방법</dt>
    <dd>
        <div class="box1">
            <img src="test_100px.png" alt="test image"/>
        </div>
        <div class="box1">
            <img src="test_550px.png" alt="test image"/>
        </div>
    </dd>
    <dt>line-height 를 이용한 방법</dt>
    <dd>
        <div class="box2">
            <img src="test_100px.png" alt="test image"/>
        </div>
        <div class="box2">
            <img src="test_550px.png" alt="test image"/>
        </div>
    </dd>
</dl>
<dl>
    <dt>:before / content 를 이용한 방법</dt>
    <dd>
        <div class="box3">
            <img src="test_100px.png" alt="test image"/>
        </div>
        <div class="box3">
            <img src="test_550px.png" alt="test image"/>
        </div>
    </dd>
    <dt>flex 를 이용한 방법</dt>
    <dd>
        <div class="box4">
            <img src="test_100px.png" alt="test image"/>
        </div>
        <div class="box4">
            <img src="test_550px.png" alt="test image"/>
        </div>
    </dd>
</dl>
</body>
</html>

 

출처 : blog.asamaru.net/2017/04/04/css-image-vertical-center/

반응형
저작자표시 비영리 변경금지

'개발 > html & css' 카테고리의 다른 글

[html/css] css 마우스 오버시 회전 방법 및 예제  (0) 2020.11.01
[html/css] 특정영역안에 div 띄우기  (0) 2020.10.28
[html/css] svg에서 text(글자) 가운데 정렬하기(수직, 수평 중앙정렬) [펌]  (0) 2020.09.30
[html/css] svg path text 사용법  (0) 2020.09.30
[html/css] SVG 텍스트 [펌]  (0) 2020.09.29
'개발/html & css' Related Articles more
Comments