.print 안에 있는 img가 수직 가운데 정렬이 안됩니다ㅜ
608
작성한 질문수 2
안녕하세요. .print 안에있는 이미지가 수직 가운데 정렬이 안되서 문의 드립니다.
제가 만든 예제가 가운데 정렬이 안되서 선생님이 만드신 예제를 다운받아서 확인했는데 선생님이 만드신 예제에서도 .print 안에 있는 img가 수직 가운데 정렬이 안됩니다.
.ptrint img{ vertical-align : middle} 이 작동은 하는거 같은데 이미지가 가운데로 가지 않고 밑에 있는걸까요?ㅜㅜ
답변 1
1
vertical-align : middle을 해도 완벽하게 이미지와 텍스트가 수직중앙으로 정렬은 안됩니다.
img는 인라인블록이니까 transform: translate를 사용하거나 margin-top을 네거티브로 주시면 됩니다. 2가지 방법 중 편하신 것을 선택하시면 됩니다.
화면처럼 이미지가 살짝 아래에 있으니까 transform: translateY(-3px) 또는 margin-top: -3px 이렇게 해주시면 정확히 맞추실 수 있어요.
중요한건 인라인요소는 상하 마진을 못갖고, transform 속성도 사용을 못합니다. 하지만 인라인블록은 2가지 모두 가능합니다.
class 값 한 번에 부여하는법
2
95
1
@media에서의 flex-direction: column으로 세로배치 관련 질문드립니다.
1
79
1
div#css-checker-widget의 해결방
1
71
2
input의 포커스되었을때 검정선이 사라지지 않아요
0
94
2
강의듣는법
1
86
1
아코디언 만들기 100%이하의 화면으로 보았을때
1
75
2
input checked 질문합니다.
0
81
1
Bracket Pair Colorizer - 비주얼 스튜디오
1
152
2
Part 1 영상 안나옵니다
1
97
1
제이쿼리 작동이 안됩니다
1
211
3
강의 내용 질문있습니다.
1
128
2
일정 부분만 주석하는 방법
1
222
2
폰트어썸
1
143
2
인접선택자에 대한 질문드립니다!
1
135
2
delay 적용 안됨
1
137
1
rotateY(360deg)가 적용이 안됩니다!
1
190
2
세로이동할때 height값
1
142
2
폰트어썸이 안되요..
1
504
2
화면 정중앙에 오게끔 할수있나요?
1
175
1
어코디언 네비게이션 중
1
127
1
라이브서버 문제
1
241
2
넷플릭스 어코디언 예제 질문
1
107
1
이번 강의에선 display flex가 무조건 적으로 필요한건가요 ?
1
163
1
active 관련 질문
1
149
2