개발자를 꿈꾸는 여정

4. CSS- IMG (세로/가로 ) 이미지 정렬 본문

3. Front Developer/3_2. CSS

4. CSS- IMG (세로/가로 ) 이미지 정렬

아카라타 2021. 12. 2. 00:49

IMG 및 컨텐츠요소 : CSS 가로 및 세로 정렬하는방법

이미지 보통 수평 가운데 정렬 할 시에는 img { display: block; margin : 0 auto;} 를 주었지만;

- 세로 가운데 정렬까지 같이하려면 div 상위 요소랑 같이 설정을 주고 img값에 width; height; 값을 줘야한다.

공통 html : 
    <div class="box">
            <img src="test.png" alt="test image"/>
     </div>
1. position 이용방법
 
---------------------------------------------------------
.box { position:relative; }

.box > img { position:absolute;
            max-width:100%; max-height:100%;
            width:auto; height:auto;
            margin:auto;
            top:0; bottom:0; left:0; right:0; }

2. :before / content 이용방법



---------------------------------------------------------
.box { width:150px; height:200px; text-align:center; white-space:nowrap; font:0/0 a; }
.box:before { content:""; display:inline-block; vertical-align:middle; height:100%; }
.box > img { max-width:100%; max-height:100%; display:inline-block; vertical-align:middle; }


3. line-height


---------------------------------------------------------
.box {
 width:150px; height:200px; line-height:200px;
            text-align:center;
}

.box > img {
max-width:100%; max-height:100%;
            vertical-align:middle;
}
4. flex 이용방법 

 
---------------------------------------------------------
.box { width:150px; 
height:200px;
display:flex; justify-content:center;
align-items:center;
}

.box > img { max-width:100%; max-height:100%; }

 

 

 

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!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>
 cs

'3. Front Developer > 3_2. CSS' 카테고리의 다른 글

3. 태그의 구분 : Inline | Inlineblock | Block / 정렬 : Align | Position  (0) 2021.11.23
2. GRID : display  (0) 2021.11.18
1. Flex : display  (0) 2021.11.17
'3. Front Developer/3_2. CSS' Related Articles more