두 개의 열 왼쪽에 배경 이미지 중앙에 넣기

Question

큰 이미지가 있고, 오른쪽 열에 텍스트가있는 50 % 너비와 이미지가있는 두 개의 열로 배치하려는 일부 텍스트가 있습니다. 왼쪽 열. 왼쪽 열이 오른쪽 텍스트에서 높이를 가져오고 이미지의 가운데가 왼쪽 열의 가운데에 세로, 가로 모두 있어야합니다.

는 그래서이 같은

:

[    ]|[----Text-----] 
[    ]|[-------------] 
[    ]|[-------------] 
[ Image ]|[-------------] 
[ Centre ]|[-------------] 
[    ]|[-------------] 
[    ]|[-------------] 
[    ]|[-------------] 

표준 트릭 오른쪽 열에 일치하도록 왼쪽 기둥의 높이를 얻을 수는 왼쪽 열 때문에 두 열 주위에 컨테이너 사업부를 넣어하는 것입니다 수 그것의 전체 높이가되고 오른쪽 열이 왼쪽 위에 놓 이도록 허용하십시오. 이렇게 뭔가.

<div class="container"> 
    <div class="right-column">Lorem ipsum dolor sit...</div> 
</div> 

div.container { 
    background-image: url(my_big_image.jpeg); 
    background-position: ?; 
    float: left; 
    width: 100%; 
} 

div.right-column { 
    float: right; 
    background: white; 
    width: 50%; 
} 

그렇다면 내 이미지의 중심을 왼쪽의 열 가운데로 가져 오려면 어떻게해야합니까? 높이를 얻으려면 오른쪽 열을 포함하도록 컨테이너 div가 필요하지만 왼쪽 열에 이미지를 가로로 가운데 놓으려면 제외해야합니다.

이상적으로 JavaScript를 사용하지 않고이 작업을하고 싶습니다.

Answer 1

당신은 확실히 jQuery를 함께 할 수 있지만, 여기에 CSS는 방법 :

DEMO : http://jsfiddle.net/skylar/zXqQB/

HTML :

.

<div id="container"> 
    <div id="text"> 
     <div id="image"></div> 
     Lorem ipsum dolor sit amet.. 
    </div> 
    <div class="clear"></div> 
</div> 

CSS :;`창의 크기가 조정되는 처리

#container { position:absolute; } 
#image { 
    position:absolute; 
    left:0; 
    width:50%; 
    height:100%; 
    background-color: #ccc; 
    background-image: url(http://www.maniacworld.com/have-a-nice-day.jpg); 
    background-position: center center; 
    background-repeat: no-repeat; 
} 
#text { margin-left:50%;} 
.clear { clear:both; } 

Answer 2

두 열을 같은 크기로 만드는 표준 트릭을 알고 있지만 javascript (또는 제 경우에는 jQuery)와 관련된 다른 방법을 사용하고 싶습니다. jQuery는이 용도로만 사용해서는 안되지만 사이트에있는 경우 jQuery를 사용하는 것이 좋습니다. 또한 세 번째 div가 포함됩니다.

라이브 데모 http://jsfiddle.net/ZH4mT/5/

(수평 및 수직 BG 이미지 센터 (영문)를 참조하십시오 추가/blah 영역에서 텍스트를 제거)

HTML

<div class="container"> 
    <div class="left-column"></div> 
    <div class="right-column">blah blah blah blah blah ... blah blah blah</div> 
</div> 

CSS (배경 색상은 데모 용입니다)

.container { 
    float: left; 
    width: 100%; 
} 

.left-column { 
    float: left; 
    background: #ff0 url(http://dummyimage.com/100x100/000/fff) no-repeat; 
    background-position: 50% 50%;  
    width: 50%; 
} 

.right-column { 

    float: right; 
    background:#f00; 
    width: 50%; 
} 

jQuery를

var l = $('.left-column'); 
var r = $('.right-column'); 
if (l.height() < r.height()) 
    l.height(r.height()); 
else 
    r.height(l.height());