如何将背景图像设置为全长并使文本居中对齐？

Question

我的标题横幅设置为宽度100％，但它没有覆盖顶部的所有内容，看起来像是70％，文本未设置为居中，当我检查镀铬元素时，其显示为100％宽度，但在实际显示中却没有。 我该如何解决这个问题？

main.html

<div class="row">
    <div class="col-md-12">
        <div class="header-banner">
            <h1>Server</h1>
        </div>
    </div>
</div>

main.css

.header-banner {
    background:url('../img/header_master.jpg');
    width:100%;
    min-height:70px;
    background-repeat: no-repeat;
    text-align: center;
}

Answer 1

试试吧：

.header-banner {
        background:url('../img/header_master.jpg');
        width:100%;
        min-height:70px;
        background-repeat: no-repeat;
        text-align: center;
        background-size: cover;
    }

Answer 2

引导程序行具有与之关联的边距。 因此，在使用引导程序行时，除非在CSS中将其删除，否则始终会有一个空白。