在 Div 中居中对齐图像

Question

我想在 div 中居中放置一张图片 (fiddle)。因为我希望那个 div 继承另一个漂浮在它旁边的 div 的高度，所以我不得不使用this trick.

因此，here 描述的解决方案似乎不起作用。

要求是不修改其他行为，但代码只要达到的效果相同即可。如有必要，我也愿意接受涉及 javascript 的解决方案。

<div class="container"> 
<div class="logo-div">
    <img class="logo" src="http://bit.ly/1qCKrtJ" />
</div>
<div class="text-div">
    <h4 style="display: inline;">Because Sometimes It Takes a Village</h4><br />
    What about robots the size of tea cups that scoot around on tiny wheels, snapping pictures with miniature cameras and keeping track of where they are in relation to dozens of others?
</div>

.container {
    background: green;
    overflow: hidden;
}

.logo-div {
    background: yellow;
    width: 150px;
    float: left;
    padding-bottom: 1000px;
    margin-bottom: -1000px;
}

.text-div {
    background: blue;
    float: left;
    max-width: 350px;
    padding-bottom: 1000px;
    margin-bottom: -1000px;
}

.logo {
    width: 100px;
}

Answer 1

我已经修改了代码，以便徽标图像可以水平和垂直居中对齐。

JSFiddle

HTML 代码：

<div class="container"> 
    <div class="image-div">
        <div class="logo-div">
            <img class="logo" src="http://bit.ly/1qCKrtJ" />
        </div>
    </div>
    <div class="text-div">
        <h4 style="display: inline;">Because Sometimes It Takes a Village</h4><br />
        What about robots the size of tea cups that scoot around on tiny wheels, snapping pictures with miniature cameras and keeping track of where they are in relation to dozens of others?
    </div>
</div>

CSS代码：

.container {
    background: green;
    overflow: hidden;
}

.logo-div {
    background: #FFFF00;
    display: table-cell;
    height: 100px;
    text-align: center;
    vertical-align: middle;
    width: 150px;
}

.text-div {
    background: blue;
    float: left;
    max-width: 350px;
}
.image-div {
    float: left;
}
.logo {
    width: 100px;
}

如果还有问题，请评论代码，修改jsfiddle。

问候 D.

Answer 2

有两种方法。如果您希望它在中间对齐，您可以将任何组件的 Margin 属性设置为“自动”。当然你可以在 CSS 中设置这个属性，而不是使用 style 标签。

<img src="http://bit.ly/1qCKrtJ" style="margin:auto;"/>

另一个是使用中心标签 （因为 'margin:auto' 可能不适用于某些浏览器的图像，但它适用于 div 标签。）

<center>
    <img src="http://bit.ly/1qCKrtJ" alt="Logo">
</center>

Answer 3

如果您只需要水平居中，请尝试：

.logo-div {text-align: center;}
img {margin: 0 auto;}

http://jsfiddle.net/yXNnd/18/

---

JS 版本

使用jQuery（我太懒了:)）
http://jsfiddle.net/yXNnd/25/

添加这个js

$(document).ready(function(){
    var img = $('.logo-div img');
    var top = ($('.container').height() / 2) - (img.height() / 2);
    img.css('margin-top', top + 'px');
});