2

我有一个大图像，我想将一些文本放在两列中，宽度均为 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 的情况下做到这一点！

4

2 回答 2

2

你当然可以用 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; }
于 2011-08-23T20:45:56.190 回答
1

我知道让两列大小相同的标准技巧，但我喜欢使用涉及 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());
于 2011-08-23T20:41:15.340 回答