Question

我需要创建一个网站而不破坏其结构。但是，我遇到了一个问题。建议我在上面放一个新闻稿表格，所以我照做了。但是，当我尝试调整窗口的大小（检查它是否破裂）时，它并没有破裂，而是在偏心，有没有办法使它始终相对于背景居中？

以常规尺寸居中：

调整大小后未居中：

我尝试过vertical-aling:baseline; | position:sticky; | top:16.5%; bottom:16,5%

CSS：

.boletim .caixa_email{
    position:absolute;
    z-index:999;
    margin:0 auto;
    left:0;
    right:0;
    bottom:33%;
    text-align:center;
    width:50%;
    font-family:Bebas Neue Regular;
    font-size:1vw;
}

input[type=email], input[type=submit]{
    width:45%;
    height:auto;
    padding: 12px;
    margin: 8px 0;
    display: inline-block;
    vertical-align:baseline;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

HTML：

<form action="action_page.php">
    <div class="boletim">
            <img src="Resumo.png" id="newsletter" alt="">

        <div class="caixa_email">
            <h1 id="texto_email">Inscreva-se em nosso boletim para receber ofertas!</h1>
            <input type="email" name="email" placeholder="exemplo@exemplo.com.br">
            <input type="submit" value="Inscrever-se">
        </div>
    </div>
</form>

在调整窗口大小时，我想使其始终居中（相对于背景）。

Answer 1

尝试transform

.boletim .caixa_email{
    position:absolute;
    z-index:999;
    margin:0 auto;
    left:50%;
    top:50%;
    text-align:center;
    width:50%;
    font-family:Bebas Neue Regular;
    font-size:1vw;
    transform: translate(-50%, -50%);
}

Answer 2

使用简单的Flex即可获得此结果，而无需绝对位置。在css中为background类提供背景，或者您可以在其中放置图像，并使img的绝对高度为100％；宽度：100％;左：0; top：0;

input[type=email], input[type=submit]{
    width:45%;
    height:auto;
    padding: 12px;
    margin: 8px 0;
    display: inline-block;
    vertical-align:baseline;
    border: 1px solid #ccc;
    box-sizing: border-box;
}
.background {
  background: #999;
  height: 100vh;
}
form {
height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

<div class="background">

  <form action="action_page.php">
      <div class="caixa_email">
          <h1 id="texto_email">Inscreva-se em nosso boletim para receber ofertas!</h1>
          <input type="email" name="email" placeholder="exemplo@exemplo.com.br">
          <input type="submit" value="Inscrever-se">
      </div>
  </form>
</div>

在完整的网页摘要中查看结果

保持通讯形式固定在背景图片上吗？

2 个答案: