절대 위치 안의 상대 위치 지정?

Question

여기에 내가 가진 무엇 :

<div id="container"> 
<div id="absolute"> 
    <img src="/test.jpg"> 
    <div>This is an image</div> 
</div> 
</div> 

컨테이너는 상대적이며 절대적인 DIV 그래서 내 용기의 바닥에 앉아 공의 바닥과 함께, 절대.

절대 div 안에는 이미지와 텍스트를 가운데에 배치하여 서로 나란히 놓 이도록하고 싶습니다.

어떻게하면됩니까?

Answer 1

div을 display: inline (또는 기본적으로 블록이 아닌 요소를 사용)으로 설정하고 컨테이너가 해당 요소를 보유 할만큼 충분히 넓은 지 확인하십시오.

는 (. 이것은, 그러나, 정상 유동이다 아니라 상대 위치가 상대 위치()는 간격을두고 자연 위치에서 요소를 오프셋)

Answer 2

보십시오

#absolute{position:absolute;bottom:0;text-align:center;width:100%;} 
#absolute *{display:inline-block;vertical-align:middle;} 

DEMO here.

Answer 3

또 다른 간단한 옵션은 이미지 대신 텍스트가있는 내부 div를 div 대신 범위로 변경하거나 스타일 표시를 추가하는 것입니다. 해당 div에 인라인

알라 :

옵션 2 :

<img src="/test.jpg"> 
<div style="display:inline;">This is an image</div>