好吧,我使用了 bootstrap 并有一些带有文本的缩略图框(见下面的代码)。
我还希望垂直和水平对齐文本,我使用 flexbox
完成了此操作,这似乎可行,但是现在 span
, h4
和 p
标签都在同一行而不是堆叠
。
什么是解决此问题的最佳方法,这样我就可以让标签堆叠
,但同时水平和垂直居中。
HTML
<div class="col-md-3 overlord-thumbnail">
<div class="thumbnail">
<a href="#tab4" data-toggle="tab">
<div class="caption">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
<h4>Latest News</h4>
<p>text here</p>
</div>
</a>
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
<h4> Latest News</h4>
<p>text here</p>
</div>
</div>
CSS
.overlord-thumbnail {
height: 188px;
overflow-y: hidden;
overflow-x: hidden;
}
.thumbnail {
background: whitesmoke;
border-radius: 0;
height: 100%;
display: -moz-box;
display: -ms-flexbox;
display: inline-flex;
-moz-box-pack: center;
-ms-flex-pack: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.caption {
position:absolute;
top:-100%;
right:0;
background: rgba(66, 139, 202, 0.64);
width:100%;
height:100%;
padding:2%;
text-align:center;
color:#fff !important;
z-index:2;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.thumbnail:hover .caption {
top:0;
}
目前
应该是
最佳答案
问题是默认样式覆盖了您正在应用的样式。使用 .overlord-thumbnail>.thumbnail
给它优先权。
此外,您还需要使用 flex-direction:column;
来让它们堆叠起来,而不是排成一行。
.overlord-thumbnail {
height: 188px;
overflow-y: hidden;
overflow-x: hidden;
}
.overlord-thumbnail>.thumbnail{
background: whitesmoke;
border-radius:0;
width:100%;
height: 100%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
}
.caption {
position:absolute;
top:-100%;
right:0;
background: rgba(66, 139, 202, 0.64);
width:100%;
height:100%;
padding:2%;
text-align:center;
color:#fff !important;
z-index:2;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.thumbnail:hover .caption {
top:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-md-3 overlord-thumbnail">
<div class="thumbnail">
<a href="#tab4" data-toggle="tab">
<div class="caption">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
<h4>Latest News</h4>
<p>text here</p>
</div>
</a>
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
<h4> Latest News</h4>
<p>text here</p>
</div>
</div>
关于html - 尝试在保持样式的同时使文本居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41547745/