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

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

我有一个在 iframe 中包含 html5 游戏的页面 - 它的垂直尺寸为 3:4，并且下面有一行文本。

  • 它可以垂直缩放并保持 3:4 的比例，但是游戏和文本并没有垂直居中……它的位置稍高。有什么想法如何解决，所以它都是垂直居中的吗？

  • 在较小的尺寸（以及移动设备）下，我想让它居中，并在游戏的左侧和右侧留有 50 像素的填充。但在移动设备上，即使将填充设置为媒体查询，它也不会显示...有什么解决办法吗？ screenshot showing how it looks on mobile <<

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

Html 和 css 代码如下：

谢谢-

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>

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

javascript css iframe responsive-design media-queries
1个回答
0
投票

该问题与 CSS 盒模型有关。当您设置元素的宽度和/或高度时，默认情况下，它们指定元素的“内容区域”的宽度，“不包括”任何填充或边框。您的 iframe 具有 5px 边框，该边框不包含在您指定的宽度和高度中。因此，您的 iframe 的可见高度（包括边框）是其父元素的 100%，加上 5px 顶部边框，再加上 5px 底部边框，因此它看起来太大了 10px，并且不太位于中心。与宽度相同的故事。

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

下一个问题是包含版权文本的 
p
 元素上的默认边距。只需将边距设置为零即可。


#text p {
  margin: 0;
}

最后一个问题是，在小屏幕上，iframe 容器上的高度规则和宽高比规则的组合会导致其宽度大于 100%。我的建议是，在较小的屏幕上，将高度设置为自动。


@media screen and (max-width: 600px) {
  .iframe-container {
    height: auto;
  }
} 





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;

}

#text p {
  margin: 0;
}

/* Media query for smaller screens */
@media screen and (max-width: 600px) {
  .iframe-container {
    height: auto;
  }
  #text {
    display: none; 
  }
  .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>





    





      

      
    

  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.