Question

我已尝试过here，here，here以及其他许多来源的解决方案，但我似乎无法得到我想要的内容。

我正在使用Kickstart模板，我希望在其上居中（水平和垂直）图像和文本/元素。这就是我所拥有的：

<div class="grid">
<div class="col_12" style="margin-top:50px;" >
        <div class="mainImage"> 
            <h2>h2 Text</h2>
            <h3>h3 Text</h3>         
        </div>
</div>

我的CSS：

.mainImage {
       height:400px;
       width:100%;
       background-image: url(img/Customers.png);
       text-decoration:line-through;
       display: flex;
       justify-content: center; /* align horizontal */
       align-items: center; /* align vertical */
 }

我试过了

显示：table-cell; vertical-align：middle;

但这些不起作用。

大多数解决方案都涉及指定宽度。但我不想指定宽度，因为我希望页面具有响应性。如果我使用display：table，它会使我的背景图像更小。

我想要的是： 1.拥有自己大小的图像 2.有元素集中在它上面

我可以尝试任何建议吗？

谢谢。

Answer 1

我刚才遇到过这个问题。这就是我想出的：

<强> HTML

<section id="abc">   
    <div class="table-cell">
        <div class="table-center">
            Centered
        </div>   
    </div> 
</section>

<强> CSS

#abc {
    background: url(http://i.imgur.com/nvH8nI3.jpg) 50% 0 repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 500px;
    display: table;     
    -moz-box-shadow: inset 0 0 20px #333;
    -webkit-box-shadow: inset 0 0 20px #333;
    box-shadow: inset 0 0 20px #333;
}

.table-cell {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.table-center {
    display: inline-block;
    width: 460px;
    background: rgba(45, 45, 45, 0.80);
    border-radius: 5px;
    padding: 30px 30px;
    -webkit-box-shadow: 0 0 7px 2px #0F1519;
    box-shadow: 0 0 7px 2px #0F1519;
}

.col-centered {
    float: none;
    margin: 0 auto;
}

http://jsfiddle.net/3Js35/2/

图像中的中心元素

1 个答案: