이야기앱 세상

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;} 하하 2. display:flex (가로 중앙, 세로 중앙) div{width:500px;height: 100px;border:1px solid orange;display:flex;align-items:center; /*세로 정렬*/just..

목록 스타일 이미지 처리 및 위치 이동하기 ul 태그를 사용할 때 검정색 점 대신 이미지로 나열하고 싶은데 막상 나열하게 되면 이미지 사이즈를 잘 조정해서 글자와 맞추지 않으면 이미지와 글자의 차이로 어색해지는 경우가 있다. 이미지의 위치와 글자의 위치를 조정해서 자연스럽게 맞추려면 목록 스타일 유형을 안 보이게 처리하고 백그라운드 이미지를 사용해서 조정하는 방법이 유용하다. li{ background: url(../images/bullet.gif) no-repeat 10px 5px; list-style-type: none; padding: 0px 0px 12px 24px;}