티스토리 뷰
세로 중앙 정렬 참고 사이트 : https://blog.asamaru.net/2017/04/04/css-image-vertical-center/
CSS로 이미지 세로 중앙 정렬(Vertical align)하기
HTML에서
를 CSS만으로 비율을 유지한 채로 특정 영역의 중앙에 출력하는 방법은 다음과 같다.
샘플 이미지 참고 사이트 : https://sapjil.net/placeholder-images/
샘플이미지를 간단하게 삽입하기 - Placeholder images | Sapjil
이전에는 데모사이트를 만들때 분위기를 맞추기 위하여 무의미한 이미지를 다운받아 사용하곤 했습니다. 요새는 경우에 따라 다르기도 하고 자주 사용하는것은 아니지만, 필요한 경우 Placeholder images 서비스를 사용하곤 합니다. 은근 편한 서비스여서 소개해 봅니다. 기본 형식은 어느서비스나 닮은꼴을 하고 있으며, 플러그인등의 설치가 필요없이 html에 URL형식의 정보를 입력하기만 하면 서비스를 바로 사용할 수 있습니다. table of conten
sapjil.net
<!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="http://placehold.it/247x138" alt="test image"/>
</div>
<div class="box1">
<img src="http://placehold.it/550" alt="test image"/>
</div>
</dd>
<dt>line-height 를 이용한 방법</dt>
<dd>
<div class="box2">
<img src="http://placehold.it/100" alt="test image"/>
</div>
<div class="box2">
<img src="http://placehold.it/550" alt="test image"/>
</div>
</dd>
</dl>
<dl>
<dt>:before / content 를 이용한 방법</dt>
<dd>
<div class="box3">
<img src="http://placehold.it/100" alt="test image"/>
</div>
<div class="box3">
<img src="http://placehold.it/550" alt="test image"/>
</div>
</dd>
<dt>flex 를 이용한 방법</dt>
<dd>
<div class="box4">
<img src="http://placehold.it/100" alt="test image"/>
</div>
<div class="box4">
<img src="http://placehold.it/550" alt="test image"/>
</div>
</dd>
</dl>
</body>
</html>'웹표준' 카테고리의 다른 글
| 부트스트랩 modal 에서 내용 부분만 스크롤 기능 하기 (2) | 2019.04.30 |
|---|---|
| CSS 가변영역과 고정영역이 같이 있을 경우 (0) | 2019.04.24 |
| 테이블 자체를 중앙정렬(가운데) 하기 (0) | 2019.03.20 |
| 버튼 샘플 (0) | 2018.01.25 |
| html5 무료 기초 강의 사이트 (0) | 2015.06.30 |