관리 메뉴

맛집 여행 캠핑 일상 생활

HTML/CSS DIV IMG 및 텍스트 가운데 정렬하기 본문

HTML.CSS

HTML/CSS DIV IMG 및 텍스트 가운데 정렬하기

♥ 영은파더♥ 2016. 5. 10. 14:47
HTML/CSS DIV IMG 및 텍스트 가운데 정렬하기


div 안에서 이미지 및 텍스트를 가로 및 세로 중앙 정렬하기
<style>
#imgOuter { display:table; }
#imgLayer {
display:table-cell;
text-align:center;
vertical-align:middle;
line-height:0;
width:300px;
height:300px;
border:1px solid #222222;
overflow:hidden;
}
#txtOuter { display:table; }
#txtLayer {
display:table-cell;
text-align:center;
vertical-align:middle;
line-height:0;
width:300px;
height:300px;
border:1px solid #222222;
overflow:hidden;
}
</style>

<div id="imgOuter">
<div id="imgLayer">
<img src="test.png" />
</div>
</div>
<br/>
<div id="txtOuter">
<div id="txtLayer">
가로 및 세로 텍스트 가운데 정렬하기
</div>
</div>

아래 처럼 중앙정렬이 되어 보여진다.



가로 및 세로 텍스트 가운데 정렬하기



부모 div 에 display:table;


display:table-cell;text-align:center;vertical-align:middle;line-height:0; 가 핵심이다.


Trackback : 0 | Comments : 1
댓글쓰기 폼