在div中心水平线和垂直于div中心线上方叠加img

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-top：amountpx;。 并测量它。