Question

朋友！我正在创建一个视频列表。我用bootstrap网格系统创建它。这是我的代码我想在中间缩略图中垂直和水平中心播放按钮。如何修改代码？

.test {
    width: 100%;
    background: #f5f5f5;
    border: 1px solid #e5e5e5;
    position: relative;
}
.quick-img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}
.kkk {
    position: absolute;
    z-index: 1;
    top: 25%;
    left: 45%;
    font-size: 60px;
    opacity: 0.6;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

<script src="//cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
    <div class="row">
        <div class="col-lg-6 col-sm-12 ">
            <div class="test">
                <a href="//google.com">
                    <img class="quick-img" src="http://imgs.aixifan.com/content/2017_10_02/1509609180.png" />
                    <button class="kkk glyphicon glyphicon-play"></button>
                </a>

                <h2 style=" word-break: break-all;
      word-wrap: break-word;">title test</h2>
            </div>
        </div>
        <div class="col-lg-6 col-sm-12 ">
            <div class="test">
                <a href="//google.com">
                    <img class="quick-img" src="http://imgs.aixifan.com/content/2017_10_02/1509609180.png" />
                    <button class="kkk glyphicon glyphicon-play"></button>
                </a>

                <h2 style=" word-break: break-all;
      word-wrap: break-word;">title test</h2>
            </div>
        </div>
        <div class="col-lg-6 col-sm-12 ">
            <div class="test">
                <a href="//google.com">
                    <img class="quick-img" src="http://imgs.aixifan.com/content/2017_10_02/1509609180.png" />
                    <button class="kkk glyphicon glyphicon-play"></button>
                </a>

                <h2 style=" word-break: break-all;
      word-wrap: break-word;">title test</h2>
            </div>
        </div>
    </div>
</div>

HI 朋友！我正在创建一个视频列表。我用bootstrap网格系统创建它。这是我的代码我想在中间缩略图中垂直和水平中心播放按钮。如何修改代码？

Answer 1

尝试添加到您的css：

.kkk  
{
    padding-top:50px;
}

Answer 2

尝试将此添加到您的CSS：

.test a { display: block; position: relative; }

button.kkk { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

如何使用Bootstrap中心按钮？

2 个答案: