Question

我有一个悬停使用一些文本和叠加，但我希望文本在中间居中。标题可能会改变，因此无论单词数量多少都需要为中心（我知道容器有限制）。

我知道使用jquery是可能的，但我只是想知道是否有一种CSS方式。

li {
  position: relative;
  display: inline-block;
  margin: 0 -4px -4px 0;
}
li img {
  display: block;
}
li .over {
  position: absolute;
  display: none;
  background: rgba(0, 0, 0, 0.6);
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  color: white;
}
li:hover .over {
  display: block;
}

<div class="wapper">
  <ul>
    <li>
      <img src="http://placehold.it/200x200">
      <div class="over">
        <h1>Hello</h1>
      </div>
    </li>
  </ul>
</div>

Answer 1

您可以将line-height设置为容器的高度，也可以使用转换技巧垂直居中<h1>：

li .over h1 {
    position: absolute;
    left: 0;
    top: 50%;        // 50% of the parent
    width: 100%;
    transform: translateY(-50%);   // -50% of the child
}

来源：http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Answer 2

这是另一种做到这一点的方式。

li {
  position: relative;
  display: inline-block;
  margin: 0 -4px -4px 0;
}
li img {
  display: block;
}
li .over {
  position: absolute;
  display: none;
  background: rgba(0, 0, 0, 0.6);
  top: 0;
  height: 100%;
  width: 100%;
}
li .over p {
  display: table-cell;
  height: 200px;
  width: 200px;
  text-align: center;
  color: white;
  vertical-align: middle;
}
li:hover .over {
  display: block;
}

<div class="wapper">
  <ul>
    <li>
      <img src="http://placehold.it/200x200">
      <div class="over">
        <p>Hello by name is stephen motteshead</p>
      </div>
    </li>
  </ul>
</div>

中心在悬停时扩展文本

2 个答案: