텍스트 세로 가운데, 중앙 정렬 방법 (html, css)

안녕하세요.

위의 화면처럼 구현하려면

<div style="height: 300px; background-color: #aaa; width:100%; display:table;"><div style="text-align:center; display: table-cell; vertical-align: middle;">안녕하세요.</div></div>

위 코드처럼 스타일 값을 주면 된다.

<style>
.test {
height: 200px;
background-color: #aaa;
width:100%;
display:table;
}
.tin {
text-align:center;
display: table-cell;
vertical-align: middle;
}
</style>
<div class="test"><div class="tin">안녕하세요.</div></div>

똑같은 방식을 조금 다르게 구현하면 이렇다.

This entry was posted in 블로그, 워드프레스, HTML. Bookmark the permalink.

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다