在两列左侧居中放置一个背景图片

Question

我有一个很大的图片，我想在两栏中列出一些文字，宽度都是50％，右栏中的文字和图片中的左边的列。我希望左栏从右边的文本中取得高度，图像的中心在左栏的中心，垂直和水平。

因此，像这样：

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

标准的手段来得到左手柱的高度来匹配右栏的是把一个div容器两列周围，以便左栏能在那里是全高的，并且允许右边的列坐在左边的顶部。所以像这样的东西。

<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不应该仅仅用于这个，但是如果你的网站有它，不妨使用它。它还涉及第三个分区。

LIVE DEMO http://jsfiddle.net/ZH4mT/5/

（添加/从blah区域删除文本看BG图像中心的水平和垂直）

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());