Question

.framework {
    position: absolute;
}

.headerimg {
    margin: 0 auto;
}

<body>
    <div class="framework">
        <div class="header">
            <div class="headerimg">
                <img src="Header.jpg">
            </div>
        </div>

        <div class="navbar"></div>
    </div>
</body>

这是我得到的代码，而margin: 0 auto;不起作用。任何人都可以帮助我吗？

Answer 1

使用transform以水平为中心

＆＃13;

.framework {
  position: absolute;
  display: block;
  width: 100%;
}
.headerimg {
  position: relative;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
}

＆＃13;

<body>
  <div class="framework">
    <div class="header">
      <div class="headerimg">
        <img src="Header.jpg">
      </div>
    </div>

    <div class="navbar">

    </div>
  </div>
</body>

＆＃13;

Answer 2

为了使自动边距居中，您需要为要居中的元素指定宽度，并将父元素宽度设置为100％。

.framework {
    position: absolute;
    width:100%;
}

.headerimg {
    margin: 0 auto;
    width:300px;
    display:block;
}

使用CSS将div内的图像对齐？

2 个答案: