Question

我已将bottom:0设置为div以将其对齐到底部。但是，即使我的文字是text-center，它也会与左边对齐。我想知道为什么？

.box {
  width: 100%;
}
.box:before {
  content: "";
  display: block;
  padding-top: 100%;
}
.content {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 7%;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-4">
  <a href="#" class="thumbnail">
    <div class="box">
      <div class="content">
        <div>
          <img src="http://placehold.it/350x150" alt="Title" class="img-responsive center-block">
        </div>
        <div class="caption" style="position:absolute;bottom:0;">
          <p class="text-center">Title</p>
        </div>
      </div>
    </div>
  </a>
</div>

Answer 1

对于一个绝对定位的元素，text-center将无法 on 元素，因为absolute元素被取出流量

您可以使用transform这样居中：

transform: translateX(-50%);
left: 50%;

.box {
  width: 100%;
}
.box:before {
  content: "";
  display: block;
  padding-top: 100%;
}
.content {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 7%;
}
.caption {
  position: absolute;
  bottom: 0;
  transform: translateX(-50%);
  left: 50%;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-4">
  <a href="#" class="thumbnail">
    <div class="box">
      <div class="content">
        <div>
          <img src="http://placehold.it/350x150" alt="Title" class="img-responsive center-block">
        </div>
        <div class="caption">
          <p class="text-center">Title</p>
        </div>
      </div>
    </div>
  </a>
</div>

Answer 2

父div应该将宽度设置为页面宽度的100％，然后子p元素将自己对齐到页面的中心。

在你当前的片段中，没有div元素集的宽度，这就是为什么它取其子元素内容的宽度。

由于使用类内容应用了填充，它仍然会偏离中心。

您应该仅为图像容器div应用此填充。

.box {
  width: 100%;
}
.box:before {
  content: "";
  display: block;
  padding-top: 100%;
}
.content {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.padding7 {
  padding: 7%;
}
.caption {
  position: absolute;
  bottom: 0;
  width: 100%
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-4">
  <a href="#" class="thumbnail">
    <div class="box">
      <div class="content">
        <div class="padding7">
          <img src="http://placehold.it/350x150" alt="Title" class="img-responsive center-block">
        </div>
        <div class="caption">
          <p class="text-center">Title</p>
        </div>
      </div>
    </div>
  </a>
</div>

样式“bottom：0”也与左

2 个答案: