html - 我认为在 margin 中使用百分比会有所响应

标签 html css center margin percentage

<分区>

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

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

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

有人可以弄清楚如何让它响应以及为什么在调整大小时百分比和边距的组合不能正常工作吗?

我如何始终确保 3 个 Logo 在每台设备上居中?

将多个图像置于页脚中心并在它们之间留出边距的解决方案:

.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>

最佳答案

百分比基于父容器的宽度。

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

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

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

关于html - 我认为在 margin 中使用百分比会有所响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31172086/

相关文章:

html - 没有链接的中心图像,宽度为 100%

html - 使用表格和 td 在图像下方居中文本

javascript - 隐藏和显示字段集

html - 如何在CSS上的各个元素中固定按钮内文本的位置

html - 本地主机上的 w3c html 检查器

html - 无法将 san-serif 字体与 H1 标签的最边缘对齐

html - 如何响应地将绝对 div(文本)置于相对 div(图像)之上?

html - 切换 Bootstrap 表以显示和隐藏

javascript - 在 Ionic 中将 $ionicSlideBoxDelegate 用于两个或多个幻灯片框

html - Emacs 从 html 文件跳转到 css 声明