将图像叠加在水平的div中心;中心垂直于div

Question

不确定是否只能使用css ...如果可以的话，我宁愿......

我有一条水平线（div），我想将图像放在线条的中心（水平）和（垂直）。

我用javascript尝试了这个，但它根本不起作用......

HTML：

<style type="text/css">
#container {
    background-color:#F00;
    height:5px;
    width: 77%;
    margin: 0 auto;
}
</style>

<script>
var logo = document.getElementById('logo');
var container = document.getElementById('container');
var margin = (container.clientHeight - logo.clientHeight) / 2;
logo.style.marginTop = margin + "px";
logo.style.marginBottomn = margin + "px";
</script>

<br><br><br>
<div id="container">
<img src="images/logo_footer.jpg" width="229" height="75"  id="logo" />
</div>

Answer 1

在css中，添加margin-left：auto; margin-right：auto;对于顶部和底部，你必须使用margin-top：amountpx;并测量它。