我认为使用一个百分比的保证金将是有反应的

Question

所以此刻，我正试图将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>

Answer 1

百分比基于父容器宽度。

在这里，如果你想让它们始终居中，你可以把它们放在一个父容器中，然后给它一个宽度，然后把它设置为自动边距以居中。

这样的东西应该可以

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*/
}

如注释中所述，您可以将宽度设置为最小宽度(假设它适合最小屏幕大小等(。上面我们正在做两件事。1将图像放在容器中，然后使其居中w/text-align:centre。然后我们取那个容器，使用margin:auto将其居中对齐。

这是一位前任：http://jsfiddle.net/7med35md/

Answer 2

来自W3C规范

<percentage>

百分比是根据生成的长方体包含块的宽度计算的。请注意，'margin-top'和'margin-bottom'也是如此。如果包含块的宽度取决于这个元素，那么在CSS2.1中生成的布局是未定义的。

另请参阅http://www.hongkiat.com/blog/calculate-css-percentage-margins/详细说明。

Answer 3

为此，您应该使用媒体查询媒体查询是一个CSS3模块，允许内容呈现适应屏幕分辨率等条件。它是W3C推荐的标准，是响应式web设计的基石技术。媒体查询允许您为不同的屏幕大小编写不同的CSS。您提供的网站链接也使用@media查询。因此，如果你想要这样的响应设计"确保3个标志集中在每个设备上"，你应该学习并使用它@媒体查询允许您这样做。