Question

所以我试图在鼠标悬停父母时，在父div上出现带有文本的div，一切顺利，直到我遇到问题，其中文本（“VISIT”）不再居中字体大小变得更大。

.project-box {
   width: 1000px;
   background-color: white;
   height: 350px;
   margin: auto;
   box-shadow: 0px 2px 5px 0px #737373;
}
.project-image {
   width: 400px;
   height: 260px;
   margin-left: 30px;
   background-color: #f1f1f0;
   position: relative;
   top: 50%;
   transform: translateY(-50%);
   cursor: pointer;
}
.slidein-content {
   display: none;
   background-color: #ff9933;
   z-index: 1;
   width: 400px;
   height: 50px;
   position: absolute;
   bottom: 0;
   text-align: center;
}

.project-image:hover .slidein-content {
   display: block;
}
.visit {
   font-family: 'Montserrat', sans-serif, Arial;
   color: white;
   letter-spacing: 1px;
   font-size: 2em;

<div class="project-box">
    <div class="project-image">
        <div class="slidein-content">
            <p class="visit">VISIT</p>
        </div>
    </div>
</div>

如您所见，文本“VISIT”水平对齐，但不是垂直对齐。有人知道解决方案吗？

Answer 1

在line-height=0

上设置.visit

＆＃13;

.project-box {
   width: 1000px;
   background-color: white;
   height: 350px;
   margin: auto;
   box-shadow: 0px 2px 5px 0px #737373;
}
.project-image {
   width: 400px;
   height: 260px;
   margin-left: 30px;
   background-color: #f1f1f0;
   position: relative;
   top: 50%;
   transform: translateY(-50%);
   cursor: pointer;
}
.slidein-content {
   display: none;
   background-color: #ff9933;
   z-index: 1;
   width: 400px;
   height: 50px;
   position: absolute;
   bottom: 0;
   text-align: center;
}

.project-image:hover .slidein-content {
   display: block;
   bottom:0;
 
}
.visit {
   font-family: 'Montserrat', sans-serif, Arial;
   color: white;
   letter-spacing: 1px;
   font-size: 2em;
   line-height:0;

＆＃13;

<div class="project-box">
            <div class="project-image">
                <div class="slidein-content">
                    <p class="visit">VISIT</p>
                </div>
            </div>
        </div>

＆＃13;

Answer 2

尝试使用<span>元素而不是<p>元素。所以修改你的代码：

<div class="project-box">
        <div class="project-image">
            <div class="slidein-content">
                <span class="visit">VISIT</span>
            </div>
        </div>
    </div>

这应该有助于它的中心，或者至少让你朝着正确的方向前进。我在jsfiddle here上对此进行了测试。您可能需要稍微使用边距或填充，但您遇到的问题是由于<p>元素。

Answer 3

将top:50%;和transform: translateY(-50%);添加到.slidein-content，删除底部：0并将margin: 0添加到.visit（我不知道来自在哪里，但它有一个32px的上边距和下边距，你必须以这种方式重置为0.）

.project-box {
  width: 1000px;
  background-color: white;
  height: 350px;
  margin: auto;
  box-shadow: 0px 2px 5px 0px #737373;
}

.project-image {
  width: 400px;
  height: 260px;
  margin-left: 30px;
  background-color: #f1f1f0;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

.slidein-content {
  display: none;
  background-color: #ff9933;
  z-index: 1;
  width: 400px;
  height: 50px;
  position: absolute;
  top:50%;
  transform: translateY(-50%);
  text-align: center;
}

.project-image:hover .slidein-content {
  display: block;
}

.visit {
  font-family: 'Montserrat', sans-serif, Arial;
  color: white;
  letter-spacing: 1px;
  font-size: 2em;
  line-height: 2em;
  margin: 0;
}

<div class="project-box">
  <div class="project-image">
    <div class="slidein-content">
      <p class="visit">VISIT</p>
    </div>
  </div>
</div>

更改字体大小时，悬停元素中的文本不居中

3 个答案: