尝试在保持风格的同时集中文本

时间:2017-01-09 12:07:12

标签: html css twitter-bootstrap flexbox

好的,我在使用bootstrap并且里面有一些带有文本的缩略图框(参见下面的代码)。

我还希望垂直和水平对齐文字,我使用flexbox完成此操作,这似乎有效,但现在spanh4p标签都在同一行而不是stacked

是解决此问题的最佳方法,因此我获得了标记stacked,但也将水平和垂直居中。

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

目前

enter image description here

enter image description here

1 个答案:

答案 0 :(得分:1)

问题是默认样式会覆盖您正在应用的样式。使用.overlord-thumbnail>.thumbnail优先考虑。

此外,您需要使用flex-direction:column;将它们堆叠起来,而不是彼此相邻排列。

&#13;
&#13;
.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;
}
&#13;
<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>
&#13;
&#13;
&#13;