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

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

2 个答案: