无法在图像中间显示我的文字

Question

我正在与我的代码作斗争，无法弄清楚为什么我不能让它像我想要的那样工作，我正在尝试让图像中的文本居中。

因此，当我将鼠标悬停在图像上时，会出现文本，只是现在我希望它在中间。 texy-align: center 不适合我？

早早在这里得到了一些帮助解决其他问题所以我又来了哈哈

                         /*content*/

.container {
 width: 940px;
 margin: 70px auto 0;
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
}

.container .box {
 position: relative;
 width: 300px;
 height: 198px;
 background: #555;
 margin: 5px;
 box-sizing: border-box;
 display: inline-block;
}

.container .box .imgbox {
 position: relative;
 overflow: hidden;
}

.container .box .imgbox img {
 transition: transform 2s;
}

.container .box:hover .imgbox img {
 transform: scale(1.2);
}

.container .box .details {
 position: absolute;
 top: 10px;
 left: 10px;
 bottom: 10px;
 right: 10px;
 backgound: rgba(0,0,0,.8);
 transform: scaleY(0);
 transition: transform .5s;
}

.container .box:hover .details {
 transform: scaleY(1);
}

.container .box .details .content {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 text-align: center;
 padding: 15px;
 color: #FFF;
}

.container .box .details .content h2 {
 margin: 0;
 padding: 0;
 font-size: 30px;
 color: #FFF;
}

.container .box .details .content p {
 margin: 0;
 padding: 0;
 font-size: 20px;
 color: #FFF;
}

                        <!--containers-->
<div class="container">

                        <!--Basis-->
<div class="box">
  <div class="imgbox">
   <img src="images/basis1.jpg" alt=""/>
  </div>
  <div class="details">
 <div class="content">
     <h2>Basis</h2>
 </div>
  </div>
</div>
                        <!--Standaard-->
<div class="box">
  <div class="imgbox">
   <img src="images/standaard1.jpg" alt=""/>
  </div>
  <div class="details">
 <div class="content">
    <h2>Standaard</h2>
 </div>
  </div>
</div>
                        <!--Luxe-->
<div class="box">
  <div class="imgbox">
   <img src="images/luxe1.jpg" alt=""/>
  </div>
  <div class="details">
 <div class="content">
   <h2>Luxe</h2>
 </div>
  </div>
</div> 
</div>

Answer 1

看来您已经在做 top:50% 和 translateY 50%，您必须对 X 做同样的事情。改用 translate(-50%,-50%) 并设置 left:50%;。

.container .box .details .content{
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

下面的演示；

/*content*/

.container {
  width: 940px;
  margin: 70px auto 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.container .box {
  position: relative;
  width: 300px;
  height: 198px;
  background: #555;
  margin: 5px;
  box-sizing: border-box;
  display: inline-block;
}

.container .box .imgbox {
  position: relative;
  overflow: hidden;
}

.container .box .imgbox img {
  transition: transform 2s;
}

.container .box:hover .imgbox img {
  transform: scale(1.2);
}

.container .box .details {
  position: absolute;
  top: 10px;
  left: 10px;
  bottom: 10px;
  right: 10px;
  backgound: rgba(0, 0, 0, .8);
  transform: scaleY(0);
  transition: transform .5s;
}

.container .box:hover .details {
  transform: scaleY(1);
}

.container .box .details .content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 15px;
  color: #FFF;
}

.container .box .details .content h2 {
  margin: 0;
  padding: 0;
  font-size: 30px;
  color: #FFF;
}

.container .box .details .content p {
  margin: 0;
  padding: 0;
  font-size: 20px;
  color: #FFF;
}

<!--containers-->
<div class="container">

  <!--Basis-->
  <div class="box">
    <div class="imgbox">
      <img src="images/basis1.jpg" alt="" />
    </div>
    <div class="details">
      <div class="content">
        <h2>Basis</h2>
      </div>
    </div>
  </div>
  <!--Standaard-->
  <div class="box">
    <div class="imgbox">
      <img src="images/standaard1.jpg" alt="" />
    </div>
    <div class="details">
      <div class="content">
        <h2>Standaard</h2>
      </div>
    </div>
  </div>
  <!--Luxe-->
  <div class="box">
    <div class="imgbox">
      <img src="images/luxe1.jpg" alt="" />
    </div>
    <div class="details">
      <div class="content">
        <h2>Luxe</h2>
      </div>
    </div>
  </div>
</div>

Answer 2

You can try this also by using flex

/*content*/

.container {
 width: 940px;
 margin: 70px auto 0;
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
}

.container .box {
 position: relative;
 width: 300px;
 height: 198px;
 background: #555;
 margin: 5px;
 box-sizing: border-box;
 display: inline-block;
}

.container .box .imgbox {
 position: relative;
 overflow: hidden;
}

.container .box .imgbox img {
 transition: transform 2s;
}

.container .box:hover .imgbox img {
 
}

.container .box .details {
 position: absolute;
 top: 10px;
 left: 10px;
 bottom: 10px;
 right: 10px;
 backgound: rgba(0,0,0,.8);
 transform: scaleY(0);
}

.container .box:hover .details {
    transform: scaleY(1);
    display: flex;
    align-items: center;
    text-align: center;
    width: 100%;
    margin: 0 auto;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
}

.container .box .details .content {
 display: block;
  width: 100%;
 color: #FFF;
}

.container .box .details .content h2 {
 margin: 0;
 padding: 0;
 font-size: 30px;
 color: #FFF;
}

.container .box .details .content p {
 margin: 0;
 padding: 0;
 font-size: 20px;
 color: #FFF;
}

<!--containers-->
<div class="container">

                        <!--Basis-->
<div class="box">
  <div class="imgbox">
   <img src="images/basis1.jpg" alt=""/>
  </div>
  <div class="details">
 <div class="content">
     <h2>Basis</h2>
 </div>
  </div>
</div>
                        <!--Standaard-->
<div class="box">
  <div class="imgbox">
   <img src="images/standaard1.jpg" alt=""/>
  </div>
  <div class="details">
 <div class="content">
    <h2>Standaard</h2>
 </div>
  </div>
</div>
                        <!--Luxe-->
<div class="box">
  <div class="imgbox">
   <img src="images/luxe1.jpg" alt=""/>
  </div>
  <div class="details">
 <div class="content">
   <h2>Luxe</h2>
 </div>
  </div>
</div> 
</div>

无法在图像中间显示我的文字

cant get my tekst in the middle of my image

html

css

image

center

alignment