Javascript 将图像在Div中居中对齐

我想在div（）的中央放置一个图像。因为我想让那个div从它旁边浮动的另一个div继承那个div的高度，所以我不得不使用

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

要求是不修改其他行为，但只要达到的效果相同，代码就可以修改。如果有必要，我也愿意接受涉及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>

---

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

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

---

JS版本

使用jQuery（我太懒了：）

添加这个js

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

---

有两种方法。如果希望任何组件的边距属性在中间对齐，则可以将其设置为“自动”。当然，您可以在CSS中设置此属性，而不是使用样式标记

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

另一种是使用中心标记 （对于某些浏览器，“margin:auto”可能不适用于图像，但它适用于div标记。）

---

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

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>

如果您有进一步的问题，请对代码进行评论，并修改JSFIDLE

---

关于D.

如果可能，我想要水平和垂直。另一种解决方案是使div的行为类似于表单元格，但这样我就失去了右div在下面的良好外观。但在最坏的情况下，我宁愿这样做，也不愿没有垂直居中。使用jQuery添加了JS版本。它所做的一切——计算容器和图像的高度，并将顶部边距垂直添加到内容的中间。您还可以将Devang编辑的答案与另一个div和

显示：表格单元格一起使用@Devang谢谢大家。有点元问题：我不是一个专业的网络开发者，我只是在建立我的主页，所以我在学习。避免使用JavaScript/jQuery有什么重要原因吗？（例如，CRONUS说“我太懒了”，无法证明使用jQuery是正确的，这到底有什么问题？）在这种情况下，纯JS可能是一个更好的选择，但由于我在所有我正在处理的项目中都使用jQuery，我甚至记不清如何获得元素的高度：D，这就是为什么我懒得搜索如何使用普通JS实现所需的内容；）是的，你是对的，但是对于同一个问题，我添加了一个新的jquery，我希望这可以解决问题。但若添加了一些动态文本，那个么这个jquery代码将在函数中定义，该函数在布局更改时调用。。。问候D。
<center>
    <img src="http://bit.ly/1qCKrtJ" alt="Logo">
</center>

<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>

.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;
}