떠 다니는 상자는 컨테이너가 짧게 올라간다.

나는 이것이 일반적인 질문이라는 것을 알고 있지만, 나는 그것을 올바르게 이해하지 못하고있다. 다양한 게재 위치와 명확한 설정 및 오버플로 설정의 조합을 포함하여이 작업을 수행 할 한가지를 제외하고 모든 것을 시도했습니다. 그것은 그 높이를 유지 여기 (게시물에 대한 벗었) 내 코드떠 다니는 상자는 컨테이너가 짧게 올라간다.

<style> 

#message  { border:thin red dashed; overflow:hidden; } 
#message p  { border:thin red solid; } 
#line1  { border:thin blue solid; } 
#text  { text-align:center; background-color:#FCF; vertical-align:middle;} 
#photo  { float:left; width:160px; border:thick black solid;} 

</style> 
</head> 

<body> 
<div id="Main"> 
     <div id="line1">    
      <div id="message" >      
       <div id="photo" >  <!-- floated pic box --> 
        Pretend a picture is here. Pretend a picture is here. 
        Pretend a picture is here. Pretend a picture is here. 
       </div> <!-- photo --> 

       <div id="text"> Click here to see all Key West Tours, Attractions and Packages<br /> 
        Buy Online and Save! 
       </div> <!-- text --> 

      </div> <!-- message --> 
     </div> <!-- line1 --> 
</div> <!-- Main -->

내가 텍스트를 가운데 정렬과 실제 텍스트 사업부 (분홍색 상자)로 하루 종일 길고 중간을 정렬 할 수 있기 때문에 그것의 실현해야 할입니다 그것은 변하지 않을 것이다.

질문 : 텍스트 div를 가짜 그림 상자의 높이까지 늘려서 해당 부분의 가운데에 정렬 할 수 있습니까?

출처

2009-10-01 Deverill

방금 "정렬 된 중간"이라고 알았습니다. 확실하지 않은 경우 상자의 가운데, 즉 인위적인 그림 상자의 가운데에 수직으로 정렬하고 싶습니다. 감사합니다 – Deverill

실제로 무엇을하려고하는지에 대한 좋은 방법은 없습니다. 왼쪽에 떠있는 고유 한 div에 이미지가 있기 때문에 텍스트 div를 정렬하기가 어렵습니다.

나는 텍스트 div에 약간의 위쪽 여백을 주므로 이미지 중간 근처에서 atleast가 시작되지만 분명히 특정 솔루션이 아니라 다른 옵션이 더 많습니다.

당신이 절대적으로 도울 수 이러한 링크 중 하나를 중심으로이해야하는 경우,

phrogz.net/CSS/vertical-align/index.html

또는

webtoolkit.info/css-vertical-align.html

당신이 함께 이미지와 텍스트를 넣어 시도 할 수 단일 div 태그를 사용하고 이미지의 가운데에 텍스트를 정렬하는 줄 바꿈이없는 한 이미지를 세로 정렬 : 중간으로 지정합니다.

출처

2009-10-01 20:55:35

좋아요! 첫 번째 링크는 현재의 솔루션에 나를 두었습니다 ... 텍스트를 이미지와 함께 놓고 이미지에 v-align : middle 속성을줍니다. 당신이 말했듯이,
을 올려 놓으면 호스가 나옵니다.하지만 다른 링크를 확인하고 제가 완벽하게하기 위해 뭔가를 할 수 있는지 알아 봅니다. 어떤 것들은 아직 CSS에 있어야하는 것은 아닙니다 :) 포인터에 감사드립니다! – Deverill

떠 다니는 상자는 컨테이너가 짧게 올라간다.

답변

관련 문제