在 jsfiddle 上使用 css 垂直居中文本

Question

在我的 jsfiddle 上，当鼠标悬停在图像上时，我实际上在顶部有一个文本。我想知道如何使用 css 将此文本垂直居中。这是我的 jsfiddle -> www.jsfiddle.net/kodjoe/4kurw7ap/

我知道我必须使用 display:inline-block with vertical-align:middle，但没有任何变化 ;-/ 也许我忘记了什么 ??

这是我的已更新代码：

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>

已更新 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

你能用这样的东西吗？

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

我所做的就是添加类 first-img & second-img 并根据图像高度在每个顶部添加填充到 :after .

我实际上从未见过像这样在 div 上使用替代文本我认为将 img 和 p 标签放在 [= 中可能会更好15=] 在 div 标签上添加 position:relative; 并在 p 标签上添加 position:absolute，这可能对您来说更容易处理。

这里有一些关于它的文档https://css-tricks.com/design-considerations-text-images/

Answer 2

为 div:after

包含 padding-top

div:after {
    padding-top:33%;

}

Answer 3

试试下面的代码

在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 4

使用 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 5

请试试这个：

 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 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;
   ....
}

在 jsfiddle 上使用 css 垂直居中文本

center text vertically with css on jsfiddle

html

css

center

vertical-alignment