将 div 内的内容居中对齐答案

【问题标题】：Center align content inside a div将 div 内的内容居中对齐
【发布时间】：2023-04-05 18:41:01
【问题描述】：

嗯，标题说明了一切。如何在该 div 内居中对齐这 3 个缩略图？我尝试了许多在 SO 和网络上其他地方提出的解决方案，但没有成功。

我不是 Bootstrap、网页设计或 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 部分：

https://jsbin.com/pabebetoqo/edit?html,css,output

【问题讨论】：

您使用的是什么版本的引导程序？ span* 类已替换为 col-sm-*
getbootstrap.com/css 引导文档
哦，你可以使用 center-block 类来居中或 text-center

标签： css twitter-bootstrap center

【解决方案1】：

您应该对flexbox 进行一些研究，这是一种为此类布局而发明的 CSS 技术。其实很简单。我认为以下可能会解决问题。

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

【讨论】：

这是迄今为止最快、最简单的解决方案！刚刚将您的建议应用到我的 css 和 puff... 你让我很开心！
@Pumizo 很高兴听到它，欢迎来到 Stack Overflow。继续提问和回答问题！还记得对您认为有用的问题或答案进行投票，以便在其他人寻找类似答案时“浮到顶部”。
@Pumizo SO (Stack Overflow) 也有一个非常酷的游览，如果你有兴趣的话。 stackoverflow.com/tour

【解决方案2】：

您不能通过text-align:center 样式将包含三个元素的行居中吗？

/* This will center all of the content within your row */
.row { text-align: center; }

或者，如果您想更具体，只需您的 mask3 元素：

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

示例

/* History */

.mask3 {
  text-align: center;
}
section#history {
  padding-bottom: 0;
}
section#history h1 {
  font-size: 3em;
  margin-bottom: 1em;
  margin-top: 0.5em;
}
section#history hgroup h2 {
  margin-top: 1em;
  text-transform: capitalize;
}
section#history hgroup h3 {
  margin-top: .35em;
  font-family: 'Patua One', cursive;
}
section#history .entry-content {
  margin: 1em 0 2.5em;
}
section#history .align {
  text-align: center;
  margin-top: 10px;
  font-size: 6em;
}
/* history Image Hover */

.mask3 img {
  margin: 0 auto;
  max-width: 100%;
  display: block;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  filter: alpha(opacity=80);
  opacity: 0.6;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.mask3 img:hover {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=99)";
  filter: alpha(opacity=99);
  opacity: 1;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <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>
</body>

</html>

【讨论】：

【解决方案3】：

使用文本对齐 css

.mask3 {
   text-align: center;
 }

【讨论】：

【解决方案4】：

方法如下：

<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;
}

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

【讨论】：