인라인 블록 내부에 플로팅 div를 세로로 가운데에 배치하는 방법은 무엇입니까?

인라인 블록 내부에 div를 세로로 가운데에 놓으려고합니다. 이 인라인 블록을 사용하여 내 div의 중심에 자동으로 크기를 지정했습니다.인라인 블록 내부에 플로팅 div를 세로로 가운데에 배치하는 방법은 무엇입니까?

문제는 내 아이들 div가 왼쪽/오른쪽 위치로 그것을 제한하기 위해 떠있는 것입니다. 그러나

<span class="block_container"> 
    <div class="block_text"> <!-- float:right --> 
     <h1>TITLE</h1> 
     <p>lorem ipsum</p> 
    </div> 
    <div class="block_image"> <!-- float:left --> 
     <img src="test.png"></img> 
    </div> 
</span>

, 나는이 문제를 알아낼 수 없습니다 : 여기

는 같은 HTML 모양이 어떻게 http://jsfiddle.net/kl94/nH2sd/

편집 : 여기
내가 원하는 무엇인가 :
enter image description here

다음은 내가 시도한 것입니다. http://jsfiddle.net/kl94/nH2sd/

출처

2013-06-06 klefevre

이 브라우저는 구체적입니다. 바이올린은 FF로 나에게 잘 어울립니다. –

음, 아니요, 대상은 모바일 장치 용이지만 모든 곳에서 작동해야합니다. 나는 IE에서 시도하지 않으며 그것을 지원할 필요가 없습니다 ... – klefevre

당신이 원하는 방식으로 스크린 샷을 공유하십시오. 나는 케빈과 잘 어울리는 것에 동의한다. - @ kl94 – Nitesh

은 당신이 당신의 첨부 된 스크린 샷에 따라 작업을 원하는 방식으로 작업 실제 수직 정렬을 얻으려면, 당신은 몇 가지를 변경해야합니다.

1. display:table-row;을 부모 블록에 추가.

2. 모든 수레를 제거하고 공존하고 당신이 첨부 된 스크린 샷에 따라 원하는 방식으로 작업 할 수 vertical-alignment의 정확한 특성을 적용합니다 display:table-cell;

이로 교체.

<span class="block_container"> 
     <div class="block_image"> 
     <img src="https://upload.wikimedia.org/wikipedia/commons/6/64/Gnu_meditate_levitate.png"></img> 
    </div> 
    <div class="block_text"> 
     <div class="bgColor"> 
     <h1>TITLE</h1> 
     <p>I should be align vertically but the problem is i don't know my left neightbor height...</p> 
      <div> 
    </div> 
</span>

CSS의 :이 도움이

.block_text { 
    /*background: red;*/ 
    /*float: right;*/ 
    width: 60%; 
    display:table-cell; 
    vertical-align:middle; 
} 

.block_image { 
    background: yellow; 
    /*float: left;*/ 
    width: 40%; 
    display:table-cell; 
} 

.block_image img { 
    width: 100%; 
    max-width: 300px; 
    height:auto; 
} 

.block_container { 
    background:teal; 
    /*display:inline-block;*/ 
    display:table-row; 
} 
.bgColor{background:red;}

희망 여기에

는 WORKING DEMO

html로입니다.

출처

2013-06-06 09:55:48 Nitesh

테이블 행이 가로로 정렬되어 있습니까? – klefevre

예. http://jsfiddle.net/nH2sd/4/ (새로운 부모 래퍼 Div 포함) http://jsfiddle.net/nH2sd/5/ (부모 Div로 테이블 행 포함) - @ kl94 – Nitesh

당신은 이런 식으로 뭔가를 시도 할 수 : http://codepen.io/pageaffairs/pen/LlEvs

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<style> 

.block_text { 
    background: red; 
    display:inline-block; 
    vertical-align: middle; 
} 

img { 
    width: 40%; 
    max-width: 300px; 
    vertical-align:middle; 
    background: yellow; 
} 

.block_container { 
    background:teal; 
    display: inline-block; 
} 


</style> 
</head> 
<body> 

<div class="block_container"> 
     <img src="https://upload.wikimedia.org/wikipedia/commons/6/64/Gnu_meditate_levitate.png"><div class="block_text"> 
     <h1>TITLE</h1> 
     <p>I should be align vertically but the problem is i don't know my left neightbor height...</p> 
    </div> 
</div> 

</body> 
</html>

출처

2013-06-06 09:52:09

호기심을 위해서, 확대하면 빨간색 텍스트 상자가 부모와 줄 바꿈되지 않고 다음 줄로 넘어갑니다. 그것은 한계입니까? – Nitesh

예, 실제로 그렇게 보입니다. 너의 것이 더 나은 해결책이다. 그것은 내가 선호하는 옵션 이었지만 인라인 블록을 먼저 시도했다. 나는 테이블 버전을 게시하려고했으나 당신은 저를 때렸습니다. 나는 테이블 행을 사용하지 않았지만 솔루션은 동일했습니다. 내가 너를 업신 여겠다. :-) –

Thnx @ ralph.m 감사합니다. – Nitesh

이 작업을 추가 할 수 있습니다

margin-top: 13%;를 CSS에 .block_text 선택에.

출처

2013-06-06 09:55:57 Gimmy

우리가 왼쪽 div의 높이가 얼마인지 모르겠다면? –

인라인 블록 내부에 플로팅 div를 세로로 가운데에 배치하는 방법은 무엇입니까?

답변

관련 문제