javascript - 将图像覆盖在 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-top: amountpx;并测量它。