【问题标题】：I thought using a percentage in margin would be responsive [closed]我认为使用保证金百分比会有所反应[关闭]
【发布时间】：2015-09-19 05:54:06
【问题描述】：

所以此刻，我正试图将 3 个社交媒体图标很好地置于网站页脚的中心。

因此，我没有使用边距和像素，当然在较小的屏幕上查看时不会响应，我尝试使用百分比，我认为这使它响应。我一直以为会计算屏幕的百分比，导致在不同宽度的不同屏幕上总是相同的百分比距离..

正如您在网站 (http://riksblog.com/Marnik/index.html) 上看到的那样，在调整大小时显然不是这种情况..

有人可以解释一下如何使它具有响应性，以及为什么在调整大小时百分比和边距的组合不能正常工作？

如何始终确保 3 个徽标位于每台设备的中心？

在页脚中居中多个图像并在它们之间留出空白的解决方案：

.footer {
  width: 100%;
}

.logo-container {
  margin: auto;
  width: 320px;
  text-align: center;
 /* you can set this to the lowest bound, 
  * or you can change this based on breakpoint
  */
}

.logo {
  margin: 0 10px; /*or whatever spacing you need*/
}

<div class="footer">
   <div class="logo-container">
     <img src="logo/path" class="logo">
     <img src="logo/path" class="logo">
     <img src="logo/path" class="logo">
   </div>
</div>

【问题讨论】：

标签： html css center margin percentage

【解决方案1】：

百分比基于父容器宽度。

在这里，如果您希望它们始终居中，您可以将它们放入父容器中，然后给它一个宽度，然后将其设置为 margin auto 以使其居中。

所以这样的东西应该可以工作

html

<div class="footer">
   <div class="logo-container">
     <img src="logo/path" class="logo">
     <img src="logo/path" class="logo">
     <img src="logo/path" class="logo">
   </div>
</div>

css

.footer {
  width: 100%;
}

.logo-container {
  margin: auto;
  width: 320px;
  text-align: center;
 /* you can set this to the lowest bound, 
  * or you can change this based on breakpoint
  */
}

.logo {
  margin: 0 10px; /*or whatever spacing you need*/
}

如 cmets 中所述，您可以将宽度设置为最小宽度（假设它适合最小的屏幕尺寸/等）。上面我们正在做两件事。 1 将图像放入容器中，然后将它们居中 w/ text-align: center。然后我们取那个容器，并使用 margin:auto 将它居中对齐。

这是一个前小提琴：http://jsfiddle.net/7med35md/

【讨论】：

感谢您提供有趣的信息和您的示例，@Brodie。我希望我能够每次自动计算每个设备的宽度，但我想我必须为不同的屏幕尺寸进行一些媒体查询..
如果你想这样做，你可以使用JS来抓取屏幕宽度。此外，使用上述方法，假设您在页脚中只有 3 个您希望始终居中的项目。您可以使项目的父容器成为您想要支持的最小宽度，这应该可以正常工作。为此，媒体查询似乎是一个好主意，因为这样您就可以在某些宽度处重新调整图标的空间/调整大小：D

【解决方案2】：

来自W3C spec

<percentage>

百分比是根据生成框的包含块的宽度计算的。请注意，'margin-top' 和 'margin-bottom' 也是如此。如果包含块的宽度取决于此元素，则结果布局在 CSS 2.1 中未定义。

详情请参阅http://www.hongkiat.com/blog/calculate-css-percentage-margins/。

【讨论】：

【解决方案3】：

为此，您应该使用 media-query 媒体查询是一个 CSS3 模块，允许内容渲染适应屏幕分辨率等条件。它是 W3C 推荐的标准，是响应式网页设计的基石技术。媒体查询允许您为不同的屏幕尺寸编写不同的 CSS。您提供的网站链接也使用@media 查询。因此，如果您想要这种响应式设计，您应该学习和使用它“确保 3 个徽标位于每个设备的中心".@media 查询允许您这样做。

【讨论】：