垂直中心文字與jsfiddle上的css

Question

在我的jsfiddle上，當鼠標懸停在圖像上時，我實際上有一個文字。我想知道如何將這個文本垂直與CSS中心。 這裏是我的jsfiddle - >www.jsfiddle.net/kodjoe/4kurw7ap/

我知道，我已經使用顯示：inline-block的垂直對齊：中間，但沒有改變; - /也許我忘記了什麼東西？

這裏是我的UDAPTED CODE：

HTML：

<div id="wrapper"><div id="list"> 





<div alt="text here" class="item"><img class="imggrid" src="http://s5.favim.com/orig/141028/coffee-fashion-girl-grunge-Favim.com-2187377.jpg" alt=""></div> 

<div alt="text here" class="item"><img class="imggrid" src="http://images0.chictopia.com/photos/highglossfashion/5948104335/high-gloss-fashion-dress_400.jpg" alt=""></div> 
</div></div> 

UDAPTED CSS：

body { background: #f1f1f1; } 


#wrapper { max-width: 1260px; margin: 0 auto; } 

#list { 
overflow: hidden; 
margin-bottom: -30px; 
-webkit-column-count: 3; 
-webkit-column-gap: 30px; 
-webkit-column-fill: auto; 
-moz-column-count: 3; 
-moz-column-gap: 30px; 
-moz-column-fill: auto; 
column-count: 3; 
column-gap: 30px; 
column-fill: auto; 
} 


.imggrid { width:100%; padding:10px;} 

.imggrid:hover{ opacity: 0.9; } 


.item { vertical-align: top; display: inline; margin-bottom: 30px; -webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; column-break-inside: avoid; } 

@media only screen and (max-width: 1024px) { 
#wrapper { max-width: 860px; margin: 0 auto; } 
#list { -webkit-column-count: 2; -webkit-column-gap: 15px; -moz-column-count: 2; -moz-column-gap: 15px; column-count: 2; column-gap: 15px; } 
.item { margin: 0px auto 15px auto;} 
} 


@media only screen and (max-width: 600px){ 
#wrapper { max-width: 440px; margin: 0 auto; } 
#list { -webkit-column-count: auto; -moz-column-count: auto; column-count: auto; } 

} 

div { position:relative; display:inline-block; } 

div:after { 
    content: attr(alt); 
    height:80%; 
    width:80%; 
    margin: 0 auto; 
    position:absolute; 
    top:10%; 
    left:10%; 
    background:rgba(255, 255, 255, 1); 
    text-align:center; 
    color:black; 
    display:inline-block; 
    box-sizing:border-box; 
    opacity:0; 
    transition: 0.4s all; 
    -webkit-transition: 0.4s all; 
    -moz-transition: 0.4s all; 
} 

div:hover:after { opacity:1; } 

Answer 1

請試試這個：

div { position:relative; display:inline-block; vertical-align:middle; } 
.centerDiv{ 
position:absolute; 
    left:50%; 
    top:50%; 
} 
.container 
{ 
    text-align:center; 
} 
.centerDiv { 
    content: attr(alt); 
    height:80%; 
    width:80%; 
    margin: 0 auto; 
    position:absolute; 
    top:10%; 
    left:10%; 
    background:rgba(255, 255, 255, 1); 

    text-align:center; 
    color:black; 
    display:inline-block; 
    box-sizing:border-box; 
    opacity:0; 
    transition: 0.4s all; 
    -webkit-transition: 0.4s all; 
    -moz-transition: 0.4s all; 
} 
.centerDiv:hover { opacity:1; } 

.content{ 
top: 50%; 
    transform: translateY(-50%); 
    position:relative; 
} 
} 

DEMO

Answer 2

你可以使用像這樣？

Codepenhttp://codepen.io/noobskie/pen/WQvOYX?editors=110

所有我所做的就是添加了類first-img & second-img，並在每一個基於圖像的高度調整的頂部添加填充，以:after。

我其實從來沒見過這樣的一個div我想大概會更好地把img和div內p標籤上p標記添加position:relative;的股利和position:absolute使用替代文本，它可能更容易與你合作。

這裏是它的一些文檔https://css-tricks.com/design-considerations-text-images/

Answer 3

包括padding-top爲div:after

div:after { 
    padding-top:33%; 

} 

Answer 4

試試下面的代碼

添加以下代碼中CSS。 CSS

#box{  
    text-align: center; 
vertical-align: middle; 
    line-height: 80px; /*The same as your div height*/ 
    } 

添加以下代碼div標籤。

div標籤

<div alt="text here" ID="box"> 

Answer 5

使用Flexbox將和中心垂直使用justify-content和水平使用align-items。這樣的文字可以更加一條線，而我們並不需要知道::after（fiddle）的高度：

div::after { 
    display:flex; /** don't forget to remove the display: inline-block **/ 
    justify-content: center; 
    align-items: center; 
    padding: 10%; /** not necessary but looks better with long text **/ 

    content: attr(alt); 
    height:80%; 
    width:80%; 
    margin: 0 auto; 
    position:absolute; 
    top:10%; 
    left:10%; 
    background:rgba(255, 255, 255, 1); 
    color:black; 
    box-sizing:border-box; 
    opacity:0; 
    transition: 0.4s all; 
    -webkit-transition: 0.4s all; 
    -moz-transition: 0.4s all; 
} 

Answer 6

我會建議解決這個使用一些子元素。 http://jsfiddle.net/4kurw7ap/1/

div { position:relative; display:inline-block; vertical-align:middle; } 
 
.centeredDiv{ 
 
position:absolute; 
 
    left:50%; 
 
    top:50%; 
 
} 
 
.container 
 
{ 
 
    text-align:center; 
 
} 
 
.centeredDiv { 
 
    content: attr(alt); 
 
    height:80%; 
 
    width:80%; 
 
    margin: 0 auto; 
 
    position:absolute; 
 
    top:10%; 
 
    left:10%; 
 
    background:rgba(255, 255, 255, 1); 
 

 
    text-align:center; 
 
    color:black; 
 
    display:inline-block; 
 
    box-sizing:border-box; 
 
    opacity:0; 
 
    transition: 0.4s all; 
 
    -webkit-transition: 0.4s all; 
 
    -moz-transition: 0.4s all; 
 
} 
 
.centeredDiv:hover { opacity:1; } 
 

 
.content{ 
 
top: 50%; 
 
    transform: translateY(-50%); 
 
    position:relative; 
 
} 
 
}

<div alt="text here"> 
 
    <div class="centeredDiv"> 
 
     <div class="content">text here</div> 
 
    </div> 
 
    <img src="http://s5.favim.com/orig/141028/coffee-fashion-girl-grunge-Favim.com-2187377.jpg" /> 
 
</div> 
 

 
<div class="container" alt="text here"> 
 
    <div class="centeredDiv"> 
 
     <div class="content">text here</div> 
 
    </div> 
 
    <img src="http://images0.chictopia.com/photos/highglossfashion/5948104335/high-gloss-fashion-dress_400.jpg" /> 
 
    
 
</div>

div { position:relative; display:inline-block; vertical-align:middle; } 
.centeredDiv{ 
position:absolute; 
left:50%; 
top:50%; 
} 
.container 
{ 
text-align:center; 
} 
.centeredDiv { 
content: attr(alt); 
height:80%; 
width:80%; 
margin: 0 auto; 
position:absolute; 
top:10%; 
left:10%; 
background:rgba(255, 255, 255, 1); 

text-align:center; 
color:black; 
display:inline-block; 
box-sizing:border-box; 
opacity:0; 
transition: 0.4s all; 
-webkit-transition: 0.4s all; 
-moz-transition: 0.4s all; 
} 
    .centeredDiv:hover { opacity:1; } 

    .content{ 
    top: 50%; 
    transform: translateY(-50%); 
    position:relative; 
} 
} 

Answer 7

你可以通過使用

div::after { 
    line-height: 20em; 
    .... 
}