uknowapps

uknowapps.egloos.com

포토로그



CSS div 태그에서 수직으로 정렬하기 CSS

div 태그에서 수직으로 정렬하기

div 태그안의 내용을 수직으로 정렬할 때 vertical-align를 사용하는데 적용이 안 된다. 그럴 경우 아래와 같은 속성을 명시함으로써 해결할 수 있다.

1. display: table-cell (가로 중앙, 세로 중앙)

div{
width:500px;
height: 100px;
border:1px solid orange;
text-align: center;
vertical-align:middle;
display: table-cell;
}

<div><span>하하</span></div>

2. display:flex  (가로 중앙, 세로 중앙)

div{
width:500px;
height: 100px;
border:1px solid orange;
display:flex;
align-items:center; /*세로 정렬*/
justify-content:center; /*가로 정렬*/
}

덧글

댓글 입력 영역



애드센스 수평