的HTML

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>

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

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

Answer 2

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

Answer 3

百分比基于父容器宽度。

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

所以这样的事情应该有效

的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将图像放入容器中，然后将它们放在文本对齐中心。然后我们拿走那个容器，然后用margin：auto对齐它。

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

我认为使用保证金百分比会有回应

3 个答案:

的HTML

的CSS