Question

嗯，tittle说的一切。如何将div中的3个缩略图居中对齐？我已尝试过在SO和其他地方提供的许多解决方案，但没有成功。

我不是Bootstrap，网页设计或CSS的专业人士但是如此简单的事情怎么会这么难？

My Bootstrap代码：

<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

Answer 1

你应该对flexbox进行一些研究，这是为这种布局发明的CSS技术。它实际上非常简单。我认为以下可能会成功。

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

Answer 2

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

UITableViewController

或者，如果您想要更具体，只需要select r.res_id, r.arrive_date, r.depart_date, r.res_type, g.entry_date, if(DATEDIFF(r.depart_date, r.arrive_date) >29, 'LT', 'ST') as 'StayType', (select SUM(r.rent + r.fee_arr_early + r.fee_dep_late + r.fee_peace_waiver + r.fee_pool + r.city_tax + r.fee_cleaning + r.fee_pet + r.fee_tshirt + r.fee_misc + r.fee_non_tax + r.fee_processing + r.fee_travel_ins + r.fee_event + r.fee_cancel) from reservations as r where r.res_id = g.resId) as 'folioTotal', coalesce((select SUM(g.amount) from guest_payments as g where g.resId = r.res_id and charge_type = 'charge' ),0) as 'payments', coalesce((select SUM(g.amount)* -1 from guest_payments as g where g.resId = r.res_id and charge_type = 'credit' and approved = 'Y'),0) as 'credits', (select folioTotal - payments + credits) from reservations as r join guest_payments as g on r.res_id = g.resId group by r.res_id元素：

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

示例

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

Answer 3

使用text align css

.mask3 {
   text-align: center;
 }

Answer 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

居中对齐div内的内容

4 个答案: