Question

我正试图在响应式div中垂直居中一些文本。我无法弄明白。如果我能得到一些帮助，我将不胜感激。

谢谢。

<style>    
.thumb {
    float: left;
    margin: 0px;
    padding: 0px;
    position:absolute;
    height:100%; 
    width:100%; 


}

.thumb img {
    width: 100%;
    padding: 0;
}
.thumb > div {
    background-color: rgba(0,0,0,0.1);
    opacity: 0;
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;

}
.thumb:hover > div {
    display: block;
    opacity: 1.0;

}
.thumb > div div {
}

#text {
 vertical-align: middle;
  position: relative;
  z-index: 2;
  display: inline-block;
}


</style>

Answer 1

这通常我们在响应div中垂直居中一些文本：

.container {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle 
}

这是您想要垂直居中的DIV <div class="container">

将文本集中在响应式div中

1 个答案: