如何垂直居中我的响应式布局，并修复移动设备上的填充

Question

我对 CSS 和响应式设计还很陌生。

我有一个使用 iframe 放入页面的游戏 - 它的垂直尺寸为 3:4，并且下面有一行文本。

它垂直缩放，并保持 3:4 的比例，但是游戏和文本并没有垂直居中……它的位置稍高。有什么想法如何解决，所以它都是垂直居中的吗？
在较小的尺寸（和移动设备）下，我想让它位于游戏的中心，并在游戏的左侧和右侧有一点填充。但在移动设备上，它显得太大了，而且就在边缘。有什么想法如何解决吗？
最后，如果有任何关于如何改进代码的建议 - 请告诉我。

测试页面：https://rajeevbasu.com/projects/test/page.html

谢谢-

body {
  font-family: 'Times New Roman', serif;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.iframe-container {
  /* Define your desired aspect ratio here (e.g., 16:9) */
  aspect-ratio: 3 / 4;
  height: 80%;
}

iframe {
  width: 100%;
  height: 100%;
}

#text {
  text-align: center;
  padding-top: 16px;
  color: orange;
}


/* Media query for smaller screens */

@media screen and (max-width: 600px) {
  #text {
    display: none;
    /* Hide the text on screens below 600px width */
  }
  .iframe-container {
    padding-left: 50px;
    padding-right: 50px;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Game test layout</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body bgcolor="blue">
  <div class="iframe-container">
    <iframe style="border:5px inset silver;" src="https://rajeevbasu.com/projects/test/" allowfullscreen="true" scrolling="no" noresize="noresize" />
    </iframe>
  </div>
  <div id="text">
    <p>Copyright information here 2024. <img src="images/button.png"> <img src="images/button.png"></p>
  </div>
</body>

</html>

我尝试过的一切，包括当前代码都在上面。

Answer 1

该问题与 CSS 盒模型有关。当您设置元素的宽度和/或高度时，默认情况下，它们指定元素的内容区域的宽度，不包括任何填充或边框。您的

iframe

具有

5px

边框，该边框不包含在您指定的宽度和高度中。因此，您的 iframe 的可见高度（包括边框）是其父元素的 100%，加上 5px 顶部边框，再加上 5px 底部边框，因此它看起来太大了 10px，并且不太位于中心。

最好的解决方案是在 iframe 上设置 box-sizing。此设置意味着您指定的高度将包括任何填充和边框。

iframe {
  box-sizing: border-box;
}

body {
    font-family: 'Times New Roman', serif;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: blue;
}

.iframe-container {
    aspect-ratio: 3 / 4;
    height: 80%;
}

iframe {
  width: 100%;
  height: 100%;
  border:5px inset silver;
  box-sizing: border-box;
}

#text {
    text-align: center;
    padding-top: 16px;
    color: orange;

}

/* Media query for smaller screens */
@media screen and (max-width: 600px) {
    #text {
        display: none; /* Hide the text on screens below 600px width */
    }
    .iframe-container {
    padding-left: 50px;
    padding-right: 50px;
}

    <div class="iframe-container">
        <iframe src="https://upload.wikimedia.org/wikipedia/commons/1/1d/Novak_Djokovic_at_ATP_2015.jpg" allowfullscreen="true" scrolling="no" noresize="noresize" />
        </iframe>
    </div>
    <div id="text">
        <p>Copyright information here 2024. <img src="images/button.png"> <img src="images/button.png"></p>
    </div>

如何垂直居中我的响应式布局，并修复移动设备上的填充

问题描述投票：0回答：1

1个回答

最新问题

如何垂直居中我的响应式布局，并修复移动设备上的填充

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1