Box-Overlay mit Text in der Mitte

Question

Ich verwende eine Hover-Box in meiner Anwendung, die einen Inhalt auf Hover zeigt. Ich bin jedoch nicht in der Lage, den Text in der Mitte zu bekommen, wenn die Box NICHT schwebt.

Das ist mein html:

.box { 
    text-align: center; 
    /*float: left;*/ 
    /*margin: 5px;*/ 
    position: relative; 
} 

.box, 
.box-hover, 
.box-hover .mask, 
.box-img, 
.box-info { 
    background-color: #b4a28f; 
} 

.box-hover, 
.box-hover .mask, 
.box-img { 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

.box-type-double .box-hover { 
    z-index: 5; 
    -webkit-transition: all 300ms ease-out; 
    -moz-transition: all 300ms ease-out; 
    -o-transition: all 300ms ease-out; 
    transition: all 300ms ease-out; 
    opacity: 0; 
    cursor: pointer; 
    display: block; 
    text-decoration: none; 
    text-align: center; 
} 

.box-type-double .box-info { 
    z-index: 10; 
    color: #ffffff; 
    display: table-cell; 
    vertical-align: middle; 
    position: relative; 
    z-index: 5; 
    height: 200px; 
} 

.box-type-double .box-info .headline { 
    font-size: 15px; 
    width: 90%; 
    margin: 0 auto; 
} 

.box-type-double .box-info .line { 
    height: 2px; 
    width: 0%; 
    margin: 15px auto; 
    background-color: #ffffff; 
    -webkit-transition: all 300ms ease-out; 
    -moz-transition: all 300ms ease-out; 
    -o-transition: all 300ms ease-out; 
    transition: all 300ms ease-out; 
} 

.box-type-double .box-info .date { 
    font-size: 10px; 
} 

.box-type-double .box-hover .mask { 
    background-color: #000; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
    filter: alpha(opacity=50); 
    opacity: 0.5; 
    z-index: 0; 
} 

.box-type-double .box-hover:hover .line { 
    width: 90%; 
} 

.box-type-double .box-hover:hover { 
    opacity: 1; 
} 

.box-content { 
    font-size: 15px; 
    background-color: #3178b9; 
    color: white; 
    z-index: 0; 
    height: 200px; 
} 

Plunker Link:https://plnkr.co/edit/2TiWlPG7cVIQ56zR5UGX

Answer 1

Legen Sie es in einem span und gelten flex zu box-content

.box { 
 
    text-align: center; 
 
    /*float: left;*/ 
 
    /*margin: 5px;*/ 
 
    position: relative; 
 
} 
 

 
.box, 
 
.box-hover, 
 
.box-hover .mask, 
 
.box-img, 
 
.box-info { 
 
    background-color: #b4a28f; 
 
} 
 

 
.box-hover, 
 
.box-hover .mask, 
 
.box-img { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
.box-type-double .box-hover { 
 
    z-index: 5; 
 
    -webkit-transition: all 300ms ease-out; 
 
    -moz-transition: all 300ms ease-out; 
 
    -o-transition: all 300ms ease-out; 
 
    transition: all 300ms ease-out; 
 
    opacity: 0; 
 
    cursor: pointer; 
 
    display: block; 
 
    text-decoration: none; 
 
    text-align: center; 
 
} 
 

 
.box-type-double .box-info { 
 
    z-index: 10; 
 
    color: #ffffff; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    position: relative; 
 
    z-index: 5; 
 
    height: 200px; 
 
} 
 

 
.box-type-double .box-info .headline { 
 
    font-size: 15px; 
 
    width: 90%; 
 
    margin: 0 auto; 
 
} 
 

 
.box-type-double .box-info .line { 
 
    height: 2px; 
 
    width: 0%; 
 
    margin: 15px auto; 
 
    background-color: #ffffff; 
 
    -webkit-transition: all 300ms ease-out; 
 
    -moz-transition: all 300ms ease-out; 
 
    -o-transition: all 300ms ease-out; 
 
    transition: all 300ms ease-out; 
 
} 
 

 
.box-type-double .box-info .date { 
 
    font-size: 10px; 
 
} 
 

 
.box-type-double .box-hover .mask { 
 
    background-color: #000; 
 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
 
    filter: alpha(opacity=50); 
 
    opacity: 0.5; 
 
    z-index: 0; 
 
} 
 

 
.box-type-double .box-hover:hover .line { 
 
    width: 90%; 
 
} 
 

 
.box-type-double .box-hover:hover { 
 
    opacity: 1; 
 
} 
 

 
.box-content { 
 
    font-size: 15px; 
 
    background-color: #3178b9; 
 
    color: white; 
 
    z-index: 0; 
 
    height: 200px; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
}

<div class="container"> 
 
    <div class="col-xs-3" style="padding-top: 20px;"> 
 
    <div class="box box-type-double"> 
 
     <div class="box-hover" href="#"> 
 
     <div class="box-info"> 
 
      <div class="date"> 
 
      <p>Design Mixes</p> 
 
      </div> 
 
      <div class="line"></div> 
 
      <div class="headline">Mix Designs Grade of all concrete’s, DLC, PQC, BM, and DBM, BC.</div> 
 
      <div class="line"></div> 
 
     </div> 
 
     <div class="mask"></div> 
 
     </div> 
 
     <div class="box-content"><span>Design Mixes<span></div> 
 
    </div> 
 
    </div> 
 
</div>

<div class="container"> 
    <div class="col-xs-3" style="padding-top: 20px;"> 
     <div class="box box-type-double"> 
     <div class="box-hover" href="#"> 
      <div class="box-info"> 
      <div class="date"> 
       <p>Design Mixes</p> 
      </div> 
      <div class="line"></div> 
      <div class="headline">Mix Designs Grade of all concrete’s, DLC, PQC, BM, and DBM, BC.</div> 
      <div class="line"></div> 
      </div> 
      <div class="mask"></div> 
     </div> 
     <div class="box-content">Design Mixes</div> 
     </div> 
    </div> 
    </div> 

Das ist mein Css ist

Answer 2

.box-hover { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
} 
.box-type-double .box-info { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    width: 100%; 
} 

Lassen Sie uns, check it out!