테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

<li> 태그 안에 <img> 태그를 넣은 경우, 상단으로 붙는데.. 채택완료

홈짱 10년 전 조회 8,205
답변 4
목록

수직적으로 가운데 쯤 위치하게 하려면 어떻게 스타일을 줘야 하나요?

 

​

대충 아래 형식처럼 스타일을 줬는데 가운데로 안 붙네요.

 

글자는 가운데 위치하는데, 왜 이미지는 위로 붙을까요?

#그누보드4
댓글을 작성하려면 로그인이 필요합니다.

답변 4개

채택된 답변
+20 포인트
평
평정심
10년 전
img에 padding-top을 사용해 보세요.
로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

�
홈짱
10년 전
고맙습니다. 덕분에 잘 해결했습니다. 미처 padding margin 줄 생각은 못 했네요.

무조건 vertical-align 줘서 정렬시킬 생각밖에..ㅎ 근데, 자동으로 정렬시키는 법은 전혀 없는가요?

댓글을 작성하려면 로그인이 필요합니다.

표
표블리셔
10년 전

.side {width:150px; display:table;border:1px solid #ddd;margin:0px auto;} .side li {width:100%;height:500px;line-height:500px;display:table-cell;text-align:center;vertical-align:middle;}

 

수정해보세요 ^^ 

 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

표
표블리셔
10년 전
셈플입니다....
로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

표
표블리셔
10년 전
.side {width:150px;display:table;} .side li {width:100%;height:500px;text-align:center;display:table-cell; vertical-align:middle;} .side li a{}​

 

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

�
홈짱
10년 전
이렇게 해봤더니, li가 가로로 쭉 펼쳐지면서, 이미지 수직 정렬은 안 되네요.

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인