我认为在保证金中使用百分比会有所响应

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

来自W3C spec

<percentage>

The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.

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

Answer 2

为此你应该使用 media-query Media Queries 是一个 CSS3 模块，允许内容呈现以适应屏幕分辨率等条件。它是 W3C 推荐的标准，是响应式网页设计的基石技术。 media-query 允许您为您提供的网站的不同屏幕 sizes.The link 编写不同的 CSS 也使用 @media query.So 如果需要，您应该学习和使用它这种响应式设计 "make sure the 3 logo's are centered on every device".@media query 可以让你做到这一点。

Answer 3

百分比基于父容器宽度。

在这里，如果您希望它们始终居中，您可以将它们放入父容器中，然后为其指定宽度，然后将其设置为 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*/
}

如评论中所述，您可以将宽度设置为最小宽度（假设它适合最小屏幕 size/etc）。上面我们做了两件事。 1 将图像放入容器中，然后让它们居中 w/text-align: center。然后我们拿那个容器，并使用 margin:auto.

居中对齐

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

我认为在保证金中使用百分比会有所响应

I thought using a percentage in margin would be responsive

html

css

center

margin

percentage

html

css