javascript - 在 Div 中居中对齐图像

Question

我想将图像放在 div ( fiddle) 的中央。因为我希望那个 div 从另一个漂浮在它旁边的 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

我修改了代码，使 Logo 图像可以水平和垂直居中对齐。

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.