다른 div + 이미지 내부의 수직 중심 div

나는 div에 이미지가 있고 또 다른 하나에는 div 텍스트가 있습니다. 이미지가 배경 이미지 역할을합니다 (이유가 있습니다. 이유는 무엇입니까? background-image 속성을 통해이를 수행하고 싶지 않습니다). 내부 div의 텍스트는 바깥 쪽이 div의 가운데에 세로로 가운데에 있어야합니다.다른 div + 이미지 내부의 수직 중심 div

외부 장치 div은 좁은 장치에서 반응하는 동작을 위해 width: 100%입니다. (!) 나는 변경해야 https://jsfiddle.net/wLo80jdh/

한 가지를 스트레칭에 하지 위해 auto에 이미지의 height을 설정하는 것입니다 : 당신이 여기에서 볼 수

내 접근 방식은 작동합니다. https://jsfiddle.net/wLo80jdh/1/

내 질문은 : 그러나, 나는 내부 div의 텍스트가 수직으로 당신이 여기 볼 수 있듯이 더 이상 중심하지 않는 다음 height: auto를 설정 내가 (NO 뻗어 이미지) + 수직 중심을 자동으로 높이를 설정하는 방법 본문?

출처

2016-07-20 beta

이런 식으로? https://jsfiddle.net/victor_007/wLo80jdh/2/ –

난 당신이 바이올린 포크와 사용자의 요구에 맞도록 조정. 나는 이걸 flexbox에 사용했다. https://jsfiddle.net/x9u0dxm8/

출처

2016-07-20 09:53:42

훌륭한 해결책. 다른 제공되는 솔루션도 작동하는 것처럼 보이지만 해결책으로 'inner1' 클래스는 여전히 전체 높이를 가지고 있습니다. 호버 효과가 작동하려면 (호버 효과는 내 단순화 된 jsfiddle 예제가 아닙니다) 필요합니다. – beta

좋습니다. 그것이 당신에게 가장 잘 맞으면 대답으로 받아 들일 수 있습니다. –

.outer .inner1에서 절대 위치를 제거하고 .outer .text로 설정하고 해당 클래스에이 추가 : 당신이 높이를 가지고 .inner1을 원하는 position:absolute두면

top: 50%; 
transform: translateY(-50%);

업데이트

과에서 display:table 제거 . 여기

전체 (업데이트) 예를 https://jsfiddle.net/wLo80jdh/5/

출처

2016-07-20 09:52:08 jakob

훌륭한 답변입니다. 내가 한 가지 더 물어 보자. 귀하의 예제에서'.outer .inner1' 높이가 0 인 이유는 무엇입니까 (브라우저 도구로 검사 할 때)? 나는 그것에 크기가 있기를 요구할 것입니다. 왜냐하면 그것에 '호버 (hover)'효과가 있기 때문입니다 (바이올린은 단순한 예입니다). – beta

내 대답 좀 봐. '.outer .inner1'에는 정확한 높이가 있습니다. 이 경우 –

은'.inner1'에 대한 절대 위치를 남겨두고'display : table'을 제거합니다 .. 새로운 jsfiddle로 업데이트 된 답변보기 – jakob

다른 div + 이미지 내부의 수직 중심 div

답변

관련 문제