Question

当我将悬停在表td内的图像上方时，我需要在另一个上覆盖一个透明的div。现在正在工作，但是很混乱。有什么办法可以改善解决方案吗？实际的问题是我需要在此覆盖div中垂直对齐文本，但找不到解决方法。因此，我编写了一个脚本，文档准备就绪，可以计算出页边距的顶部以使文本居中对齐。我觉得这个解决方案非常丑陋，而且有时它不起作用，我需要重新加载表。仅使用CSS垂直对齐此文本有帮助吗？谢谢

HTML

<table id="table">
              <tbody>
                <tr>
                  <td id="xxx" class="fade-in">
                    <img src="...">
                    <a href="...">
                      <div class="over_text_container" id="xxx">
                        <p class="over_text">TEXT</p>
                      </div>
                    </a>
                  </td>

CSS

#table{
  display: table;
  margin-left: 2%;
  margin-right: 2%;
}

#table tr{
  min-width: 100%;
}

#table tr td{

  display: table-cell;
  vertical-align: middle;
  text-align: center;
  padding: 0;
  position: relative;

}

#table tr td img{

  padding: 2%;
  padding-top: 0;
  border-radius: 40px;
  width: 100%;
  height: auto;
}

.over_text_container{

  padding: 2%;
  padding-top: 0;
  background-clip: content-box;
  border-radius: 40px;
  cursor: pointer;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 999;
  position: absolute;
  transition: 0.2s;
  opacity: 0;
}

.over_text_container:hover{
  cursor: pointer;
  opacity: 0.5;
  background-color: #E3E6ED;
  transition: 0.2s;
}

.over_text{
  transition: 0.2s;
  color: #7C7C7C;
  position: relative;
  font-size: 500%;
  margin: 0;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard */
}

Answer 1

尝试使用flex：

.over_text_container{
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s;
  color: #7C7C7C;
  position: relative;
  font-size: 500%;
  margin: 0;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard */
}

将div覆盖另一个，垂直对齐文本

1 个答案: