Question

我已经尝试了所有发现的示例。我有一个div，位于图像前面的中间。但是，当屏幕调整大小时，div不会保持应有的状态。有人可以告诉我我在做什么错吗？我的代码如下：

我的HTML：

  <section class="SliderOuter">
    <img src="images/cover.png" alt="">
    <div class="container" style="text-align:center;">
      <div class="tags1">
        <img src="images/ESCO_logo_big.png" alt="">
        <h3 style="color:#ffff">Leading company in the fiel of energy efficiency</h3>
        <br>
        <h4 style="color:#ffff">Be the first to know about ESCO updates and announcements:</h4>
        <form action="" method="post" role="form">
          <input class="form-control" type="text" id="" name="" placeholder="your@email.com">
          <br>
          <input type="submit" value="Subscribe" class="btn btn-large btn btn-danger" />
        </form>
      </div>
    </div>
  </section>

我的CSS：

.tags1 {
    margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

请帮助！预先谢谢你！

Answer 1

如果我已正确理解这一点，那么您的问题不是.tags div而是其父级.container和.SliderOuter

.container需要应用一些定位，以便它位于.SliderOuter内，但仍位于第一张图像上。

.slider进而需要在其上设置定位，以便.container可以具有相对于其的高度。

您的CSS最终应该看起来像这样...

.SliderOuter {
    position: relative;
}

.container {
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.tags1 {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
}

我在这里http://jsfiddle.net/2owysubj/2/

为了摆弄小提琴，我采取了一些整理标记的自由（您应尽量避免使用内联样式和<br>来进行样式设置，并且我已经使用了一些虚拟图像进行演示，但总的原则是就在那里。

要考虑的另一件事可能是将第一张图片替换为背景图片，这样您就不必完全固定.container了。

您也可以考虑使用Flexbox来使元素居中，但是对于您当前需要的元素，定位效果很好。

HTML节应在调整大小时居中在图像中间

1 个答案: