在两列的左侧居中背景图像

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 唯一的方法：

演示： 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 不应该仅用于此目的，但如果您的网站有它，不妨使用它。它还涉及到第三个div。

现场演示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());