center text vertically with css on jsfiddle - css

Question

On my jsfiddle, I actually have a text on top when mouse is over images. I would like to know how can I center this text vertically with css.
here is my jsfiddle -> www.jsfiddle.net/kodjoe/4kurw7ap/
I know that I've to use display:inline-block with vertical-align:middle, but nothing change ;-/ perhaps I've forgotten something ??
HERE IS MY 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

Please Try this one:
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

Include padding-top for div:after
div:after {
padding-top:33%;
}

Answer 3

Could you use something like this?
Codepen http://codepen.io/noobskie/pen/WQvOYX?editors=110
All I've done is added the classes first-img & second-img and added padding to :after on the top of each one adjusted based on the image height.
I've actually never seen alt text used on a div like that i think it would probably be better to put the img and a p tag inside a div add position:relative; on the div and position:absolute on the p tag, it might be easier for you to work with.
here is some documentation on it https://css-tricks.com/design-considerations-text-images/

Answer 4

Try the following code
Add the following code in CSS.
CSS
#box{
text-align: center;
vertical-align: middle;
line-height: 80px; /*The same as your div height*/
}
Add the following code in div tag.
div tag
<div alt="text here" ID="box">

Answer 5

Use a flexbox and center vertically using justify-content and horizontally using align-items. In this way the text can be more the one line, and we don't need to know the height of the ::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

i would recommend solving this using some child elements. 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

You can do that by using
div::after {
line-height: 20em;
....
}