Css 将div内的内容居中对齐

嗯，这一点说明了一切。我怎样才能将那个div内的3个缩略图居中对齐？ 我在网上的某处和其他地方尝试了许多解决方案，但都没有成功

我不是Bootstrap、webdesign或CSS方面的专业人士，但这么简单的东西怎么会这么难呢

我的引导代码：

<div class="row">
      <div class="span3">
        <div class="mask3"> <a href="img/profile-01.jpg" rel="prettyPhoto"><img src="img/profile-01.jpg" alt=""></a> </div>
        <div class="inside">
        </div>
        <!-- /.inside -->
      </div>
      <!-- /.span3 -->
      <div class="span3">
        <div class="mask3"> <a href="img/profile-01.jpg" rel="prettyPhoto"><img src="img/profile-01.jpg" alt=""></a> </div>
        <div class="inside">
        </div>
        <!-- /.inside -->
      </div>
      <!-- /.span3 -->
     <div class="span3">
        <div class="mask3"> <a href="img/profile-01.jpg" rel="prettyPhoto"><img src="img/profile-01.jpg" alt=""></a> </div>
        <div class="inside">
        </div>
      <!-- /.inside -->
      </div>
      <!-- /.span3 -->
      </div>

我的CSS部分：

---

您不能通过样式将包含这三个元素的行居中放置吗

或者，如果您想更具体一些，只需使用

mask3

元素：

/* Likewise, this would center only the content in your mask3 elements */
.mask3{ text-align: center; }

示例

/*历史记录*/
.mask3{
文本对齐：居中；
}
第#节历史{
填充底部：0；
}
第#节历史h1{
字号：3em；
边缘底部：1米；
边缘顶部：0.5em；
}
第#节历史H组h2{
边缘顶部：1米；
文本转换：大写；
}
第#节历史H组h3{
边缘顶部：.35em；
字体系列：“八卦一号”，草书；
}
第#节历史记录。条目内容{
边缘：1米0.5米；
}
第#节历史。对齐{
文本对齐：居中；
边缘顶部：10px；
字号：6em；
}
/*历史图像悬停*/
.mask3 img{
保证金：0自动；
最大宽度：100%；
显示：块；
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=70）”；
过滤器：α（不透明度=80）；
不透明度：0.6；
盒影：1px10x10pxRGBA（0,0,0,0.2）；
-webkit过渡：所有0.3轻松输入输出；
-moz转换：所有0.3秒都易于输入输出；
-o-过渡：所有0.3秒的缓进-缓出；
-ms转换：所有0.3秒轻松输入输出；
过渡：所有0.3秒的缓进缓出；
}
.mask3 img:悬停{
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=99）”；
过滤器：α（不透明度=99）；
不透明度：1；
}

JS-Bin

使用文本对齐css

.mask3 {
   text-align: center;
 }

---

你应该学习一下，这是一种CSS技术，是为这种布局设计而发明的。其实很简单。我认为下面的方法可能会奏效

.row {
    display: flex;
    justify-content: center;
}

以下是方法：

<div class="dogs-box">
    <img src="url" class="dog" />
    <img src="url" class="dog" />
    <img src="url" class="dog" />
</div>

---

我创建了一个非常简单的示例，它准确地演示了您要实现的目标：

这是迄今为止最快速、最简单的解决方案！刚刚将你的建议应用到我的css和puff。。。你让我开心@Pumizo很高兴听到这个消息，欢迎来到Stack Overflow。继续提问和回答问题！还记得对你觉得有用的问题或答案进行投票，这样当其他人在寻找类似的答案时，这些问题或答案会“浮到顶部”。@Pumizo so（堆栈溢出）也有一个非常酷的教程，如果你感兴趣的话。您使用的是什么版本的引导？span*类已替换为col sm-*引导程序docsOh，您可以使用类中心块来居中或文本中心

<div class="dogs-box">
    <img src="url" class="dog" />
    <img src="url" class="dog" />
    <img src="url" class="dog" />
</div>

.dogs-box {
  border: 1px solid green;
  text-align: center;
}

.dog {
  width: 100px;
  height: 100px;
  margin: 5px;
}