缩略图未居中

debugcn 发表于 Dev

亨斯特

因此，我正在处理col-sm-3大小缩略图，它们当前未居中对齐（它们保持左对齐）。我希望它们的空间和中心均匀对齐。我一直在玩偏移量和推入式游戏，但永远无法获得完全均匀的间隔。

第二张图片

我总是最终使站点两边之间的间距与缩略图之间的其他间距不同。

如何使缩略图均匀分布并居中对齐？这是我的代码段：

<style type="text/css">
    .thumbnail {
        border: 0 none;
        box-shadow: none;
    }

    html, body {
        max-width: 100%;
        overflow-x: hidden;
    }
    div.center
    {
        text-align: center;
    }
</style>
<div class="row center">
    <div class="col-sm-3">
        <div class="thumbnail">
            <i class="fa fa-users fa-5x"></i>
            <div class="caption">
                <h3>Community Driven</h3>
                <p>The more notes are added, the more knowledge is shared.</p>
            </div>
        </div>
    </div>
    <div class="col-sm-3">
        <div class="thumbnail">
            <i class="fa fa-users fa-5x"></i>
            <div class="caption">
                <h3>Community Driven</h3>
                <p>The more notes are added, the more knowledge is shared.</p>
            </div>
        </div>
    </div>
    <div class="col-sm-3">
        <div class="thumbnail">
            <i class="fa fa-users fa-5x"></i>
            <div class="caption">
                <h3>Community Driven</h3>
                <p>The more notes are added, the more knowledge is shared.</p>
            </div>
        </div>
    </div>
</div>

克杰耶

Bootstraps网格基于12列。它每隔.row12列划分一次，并使用类列.col-xs-6或.col-sm-3您定义内容应使用的列数。在这种情况下，xs屏幕有12个中有6个，sm屏幕有12个中有3个。

您希望将屏幕分为三部分以供sm使用，因此您需要将每一个都.thumbnail包含在屏幕中.col-sm-4。但是，您也希望.thumbnail它更小，您希望它.col-sm-3更宽。

这并不容易映射到Bootstrap的网格框架，因为您需要(12 - 3 * 3) / 4 = 0.75每个零件的列偏移量。一种解决方案可能是通过添加来自己定义此偏移量margin-left: 6.25%。

.thumbnail {
  border: 0 none;
  box-shadow: none;
}

.col-sm-offset-3-4 {
  margin-left: 6.25%;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">


<div class="container">
<div class="row text-center">
  <div class="col-sm-3 col-sm-offset-3-4">
    <div class="thumbnail">
      <i class="fa fa-users fa-5x"></i>
      <div class="caption">
        <h3>Community Driven</h3>
        <p>The more notes are added, the more knowledge is shared.</p>
      </div>
    </div>
  </div>
  <div class="col-sm-3 col-sm-offset-3-4">
    <div class="thumbnail">
      <i class="fa fa-users fa-5x"></i>
      <div class="caption">
        <h3>Community Driven</h3>
        <p>The more notes are added, the more knowledge is shared.</p>
      </div>
    </div>
  </div>
  <div class="col-sm-3 col-sm-offset-3-4">
    <div class="thumbnail">
      <i class="fa fa-users fa-5x"></i>
      <div class="caption">
        <h3>Community Driven</h3>
        <p>The more notes are added, the more knowledge is shared.</p>
      </div>
    </div>
  </div>
</div>
  </div>

更好的解决方案可能是简单地使用a.col-sm-4将屏幕划分为三个相等的部分，并<div>在各列内容周围添加a，并在其中添加一些水平填充。

附言：我确实认为，如果您真的想要这个，请重新考虑。真的必须看起来完全像这样吗？如果是这样，您如何期望它在较小或较大的屏幕上显示？

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-06-10

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章

缩略图未居中

缩略图未居中

引导缩略图忽略居中CSS

缩略图图像未水平对齐

在Bootstrap缩略图中垂直居中约束图像

对齐居中的垂直和水平不规则缩略图

将缩略图水平对齐以在Bootstrap 3中居中

浮动缩略图

浮动缩略图

PDF缩略图

藤蔓缩略图

Nautilus缩略图未显示在14.04中

缩略图未显示在MKMapView批注视图中

缩略图未显示在LinkedIn共享帖子上

YouTube缩略图未使用Glide在Android中加载

Nautilus缩略图未显示在14.04中

图纳尔未显示任何缩略图

youtube api中未返回任何缩略图

WordPress特色图片/帖子缩略图未显示

在Ubuntu 18.04的视频中未显示缩略图

Google课堂缩略图

UITableView缩略图性能

Youtube获取缩略图

MediaWiki SVG缩略图

WordPress的缩略图大小

水平对齐缩略图

提取PDF缩略图

如何显示缩略图？

Youtube获取缩略图

显示缩略图的PHP

使缩略图宽度Java