主要CSS属性

Question

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

然而，这似乎不起作用，因为我试图将内容集中在的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而不是table-cell准备了这个例子，所以他们可以换行并删除所有不需要的HTML标记。

主要CSS属性

使用伪元素.product:before对文本进行居中。本质上，此元素强制内联文本在中间垂直对齐。如果你需要在IE6 - 7中使用它，它可以用div替换。
在.product悬停之前，文字会被赋予0不透明度。
图片为position: absolute，并将自己与其position: relative父级相关联。需要这样才能将其拉出流程以对齐文本。
过渡可平滑不透明度变化。 .product被赋予白色边框，以便在悬停时可以转换为黑色边框。

注意：目前，不支持opacity的浏览器，即IE6和7，没有回退。如果需要，可以使用display: none来实现这一点。 IE 6/7条件样式表。

2个例子

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

我们不需要任何愚蠢的div

课程.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 - “我不希望他们在任何地方点击！”

类.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>

Answer 2

table-cell使其成为垂直中心，与往常一样，text-align:center执行水平居中。

.hovertop1 a {
    display: table-cell;
    vertical-align: middle;
    text-align:center;
}

试试这个。

Answer 3

尝试将position:relative;添加到包含<h2>的div，然后将其添加到<h2>元素：

position:absolute;
top: 50%;

Answer 4

检查一下。我做得非常简单。关键是在父母上设置line-height，在孩子上设置vertical-align（不是父母！）。 vertical-align仅适用于行间距。即使您的div为height:300px;，默认行高也为font-size，因此您需要手动设置。

http://jsfiddle.net/y6mx14pz/

div{
    text-align:center;
    line-height:300px;
    border:1px solid black;
}

h1{
    vertical-align:middle;
}

在div中垂直居中内容

4 个答案:

主要CSS属性

2个例子

我们不需要任何愚蠢的div

使用div - “我不希望他们在任何地方点击！”