Question

我想将文本放在包含图像的相对高度div中。我使用绝对位置但是当我的文本在两行时，文本不居中。我已经尝试使用表格，但由于img而无法使用。

HTML：

<div id="hubs">
  <h3>Nos Hubs</h3>
  <hr>
  <a class="thumbnail vignette-hub" href="http://kkw.fr">
    <img style="opacity: 0.6;filter: alpha(opacity=60);" alt="Aéroport de Nantes" src="http://kkw.fr/uploads/upload-center/nantes-vue-aerienne091501270208.png" width="100%" />
    <p class="txt-hub-image">
      Hub de</br>Nantes
    </p>
  </a>
</div>

CSS：

.txt-hub-image {
  z-index: 100;
  position: absolute;
  left: 0px;
  top: 50%;
  width: 100%;
  height: 100%;
  text-align: center;
  text-decoration: none;
  color: white;
  font-weight: bold;
  font-size: 16px;
}
.vignette-hub {
  position: relative;
  width: 25%;
  min-width: 135px;
}
.thumbnail {
  display: block;
  padding: 4px;
  margin-bottom: 20px;
  line-height: 1.42857143;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  -webkit-transition: border .2s ease-in-out;
  -o-transition: border .2s ease-in-out;
  transition: border .2s ease-in-out;
}
.thumbnail > img,
.thumbnail a > img {
  margin-right: auto;
  margin-left: auto;
}
a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
  border-color: #337ab7;
}
.thumbnail .caption {
  padding: 9px;
  color: #333;
}

你有什么想法吗？

Answer 1

您的代码段需要进行一些更改才能使其自动适用于所有维度：

p代码为margin-top。如果你没有重置它，那么绝对定位在50％将变为50％+ margin-top。这需要重置。
当您将元素绝对放置在top: 50%时，该框将位于容器高度的50％处，文本将从该位置开始添加。因此，要将文本块的中心与父级的中心相匹配，您必须将文本框翻译为其自身大小的50％。这可以通过添加transform: translateY(-50%)。
您无需在height: 100%标记上添加p即可将其删除。

注意：使用transform方法定位需要CSS3支持，但我认为这应该不是问题，因为您已经在使用{{1} }。如果您想支持非CSS3兼容的浏览器，请查看提到的其他方法here。我添加了一个不同的答案，只是为了解释我上面提到的前两点。

transition

.txt-hub-image {
  z-index: 100;
  position: absolute;
  left: 0px;
  top: 50%;
  width: 100%;
  text-align: center;
  text-decoration: none;
  color: white;
  font-weight: bold;
  font-size: 16px;
  /* added to fix the vertical centering */
  margin-top: 0px;
  transform: translateY(-50%);
}
.vignette-hub {
  position: relative;
  width: 25%;
  min-width: 135px;
}
.thumbnail {
  display: block;
  padding: 4px;
  margin-bottom: 20px;
  line-height: 1.42857143;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  -webkit-transition: border .2s ease-in-out;
  -o-transition: border .2s ease-in-out;
  transition: border .2s ease-in-out;
}
.thumbnail > img,
.thumbnail a > img {
  margin-right: auto;
  margin-left: auto;
}
a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
  border-color: #337ab7;
}
.thumbnail .caption {
  padding: 9px;
  color: #333;
}

以下demo fiddle为the snippets feature seems to be down。

Answer 2

将.txt-hub-image类，最高值从50％更改为25％。

相对高度div

2 个答案: