html - 在 div 中垂直居中内容

Question

我正在尝试使用 display:table-cell 结合 vertical-align: middle 将一些 h2 文本在 div 中垂直居中。

但是，这似乎不起作用，因为我试图将内容居中的 div 是另一个 div 的子级。

这是我的 CSS 和 HTML:

.productList {
  width: 100%;
  max-width: 1120px;
  position: relative;
  margin: 0 auto;
}
.hoverbase1 {
  float: left;
  margin: 15px;
  width: 250px;
  height: 250px;
  position: relative;
}
.hoverbase1 a br {
  display: none;
}
.hoverbase1 img {
  width: 250px;
  height: 250px;
  position: relative;
}
.hovertop1 {
  position: absolute;
  width: 250px;
  height: 250px;
  bottom: 0;
  left: 0;
  background-color: white;
  border: 2px solid black;
  opacity: 0;
  display: table-cell;
  vertical-align: middle;
}
.hoverbase1 a:hover + .hovertop1,
.hovertop1:hover {
  opacity: 1;
}

<div class='productList'>
  <div class='hoverbase1'>
    <a href='http://kingfisher.org.au/library-shelving'>
      <img src="http://kingfisher.org.au/pic/library_shelving.jpg" />
    </a>
    <div class='hovertop1'>
      <a href='http://kingfisher.org.au/library-shelving'>
        <h3>Library Shelving</h3>
      </a>
    </div>
  </div>
</div>

也可用作 a fiddle .

Answer 1

我已经用display: inline-block准备了这个例子，而不是表格单元格，因此它们可以换行，并且我删除了所有不需要的 HTML 标记。

主要 CSS 属性

• 文本使用伪元素 .product:before 居中。 。本质上，该元素强制内联文本在中间垂直对齐。如果您需要它在 IE6 - 7 中工作，可以将其替换为 div。

• 文本的不透明度为 0，直到 .product悬停。

• 图像是position: absolute并将根据其 position: relative 来定位自己 parent 。为了对齐文本，需要将其从流程中拉出。

• 过渡平滑了不透明度的变化。 .product具有白色边框，以便悬停时可以转换为黑色边框。

注意:目前对于不支持opacity的浏览器没有后备方案。 ，即 IE6 和 7。如果需要，可以使用 display: none 来实现。在 IE 6/7 条件样式表中。

2 个示例

“显示代码片段”并运行它。

我们不需要愚蠢的 div

类(class).product被赋予<a>元素和整个框是一个链接。

<a class="product" href="href='http://kingfisher.org.au/library-shelving">
  <img src="http://kingfisher.org.au/pic/library_shelving.jpg" />
  <h2>Library Shelving</h2> 
</a>

.product {
  width: 250px;
  height: 250px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  border: solid 1px #FFF;
  transition: border 1s;
  text-align: center;
}
.product:before {
  height: 100%;
  content: '';
  display: inline-block;
  vertical-align: middle;
}
.product img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.5s;
}
.product:hover {
  border: solid 1px #000;
}
.product:hover img {
  opacity: 0;
}
.product h2 {
  opacity: 0;
  transition: opacity 0.5s;
  font-weight: none;
  display: inline;
  font-size: 1em;
}
.product:hover h2 {
  opacity: 1;
}
.product {
  text-decoration: none;
}

<a class="product" href="href='http://kingfisher.org.au/library-shelving">
  <img src="http://kingfisher.org.au/pic/library_shelving.jpg" />
  <h2>Library Shelving</h2>	
</a>

使用 div - “我不希望他们随意点击任何地方!”

• 类(class) .product赋予包含图像和文本的 div。只有文本才是链接。

• <a>是相对位置，因此可以给出 z-index: 2以确保它是可点击的。这主要针对IE8和9。

• 图像给出 z-index: 1这样它就可以将自己定位在<a>下方

<div class="product">
  <img src="http://kingfisher.org.au/pic/library_shelving.jpg" />
  <a href="href='http://kingfisher.org.au/library-shelving">
    Library Shelving
  </a>
</div>

.product {
  width: 250px;
  height: 250px;
  display: inline-block;
  vertical-align: top;
  position: relative;
  text-align: center;
  border: solid 1px #FFF;
  transition: border 1s;
}
.product:before {
  height: 100%;
  content: '';
  display: inline-block;
  vertical-align: middle;
}
.product img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.5s;
  z-index: 1;
}
.product:hover {
  border: solid 1px #000;
}
.product:hover img {
  opacity: 0;
}
.product a {
  position: relative;
  text-decoration: none;
  font-weight: normal;
  opacity: 0;
  transition: opacity 0.5s;
  z-index: 2;
}
.product:hover a {
  opacity: 1;
}
a:hover {
  text-decoration: underline;
}

<div class="product">
  <img src="http://kingfisher.org.au/pic/library_shelving.jpg" />
  <a href="href='http://kingfisher.org.au/library-shelving">
    Library Shelving
  </a>
</div>