Question

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

我知道我要使用display：inline-block with vertical-align：middle，但没什么变化; - /也许我忘记了什么？

这是 UDAPTED 代码：

HTML：

(def string-list '("3" "3" "3" "3" "3" "3"))
(reduce = (map #(.equals (first string-list) %) string-list))

UDAPTED CSS：

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

Answer 1

你能用这样的东西吗？

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

我所做的一切都是first-img＆amp; second-img并根据图像高度调整每个顶部的:after添加填充。

我实际上从未见过在div上使用的替代文字，我认为将img和p标记添加到div内可能会更好div上的position:relative;和position:absolute标记上的p，您可能更容易合作。

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

Answer 2

包括padding-top

的div:after

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

使用弹性框并使用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/

＆＃13;

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

＆＃13;

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

＆＃13;

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垂直居中文本

7 个答案: