Question

我想将徽标放在背景图像的中心。我通过添加margin来尝试这个。但是当我以小尺寸调整屏幕大小时，它会创建额外的空间。我认为这不是正确的方法。请帮助我解决这个问题。

HTML：

<div class="details-section section">
        <div class="container-fluid">
            <div class="equal row">
                <div class="big-small">
                    <div class="big col-sm-8">
                        <img src="images/logo.png" alt="Vintage bike" class="img-responsive center-block"/>
                    </div>
                    <div class="small col-sm-4"></div>
                </div>
                <div class="small-big"></div>
                <div class="big-small-big"></div>
            </div>
        </div>
    </div>

CSS：

.details-section .big {
    background: url("images/vintage-bike.jpg") no-repeat 0 0 / cover;
}
.details-section .big img {
    width: 92px;
    margin: 180px auto;
}

这里我正在更新此代码的工作小提琴。

Working Demo

Answer 1

第一版：

.details-section .big{
    position: relative;
    background: #f5f5f5;
}
.details-section .big img{
    position: absolute;
    display: block;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

第二个版本，它仅适用于固定的容器高度，但有时很有用：

.details-section .big{
    height: 150px; // Change if need
    background: #f5f5f5;
    text-align: center;
}
.details-section .big:after{
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.details-section .big img{
    display: inline-block;
    vertical-align: middle;
}

http://jsfiddle.net/7o8bndtv/

Answer 2

请在包含img的div中添加Class文本中心，并使div中的图像verticla对齐中心

<div class="big col-sm-8 text-center myclass">
   <img src="images/logo.png" alt="Vintage bike" class="img-responsive center-block"/>
</div>

<强> CSS

.myclass {
    float:none;
    display:inline-block;
    vertical-align:middle;
}

如何在背景图像的中心放置徽标？

2 个答案: