Question

即使在身体两侧都没有空间之后，我的div仍然偏离中心。我的div根据需要占用了屏幕的整个宽度，但无法使其居中。我用左边距强制使用它，但是在其他屏幕上不起作用。有什么建议么？

CSS

div {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}
body {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}

section {
    margin: 0px 0px 0px 0px;
    border: 0px 0px 0px 0px;

}

.div-with-bg {
    background-image: url(../images/color1.jpg);
    background-repeat: no-repeat;
    background-color: grey;
    /*this is needed to keep image proportion good*/
    background-size: cover;
    position:relative;
    margin-left:0px;
    border-left:0px;
    padding-left:0px;
}

.div-no-sides {
    /*margin: 0px 0px 0px 0px;*/
    padding: 0px 0px 0px 0px;
    border: 0px 0px 0px 0px;
    /*margin-left: -5em;*/
}

HTML

<section class="hero div-no-sides" style="width:100vw">
    <div class="container div-with-bg div-no-sides wide">
        <div class="col-md-12">
            <h1>
                Heading Goes Here
            </h1>

            <p class="tagline">
                Quick. Accurate. Reliable.
            </p>
            <a class="btn btn-full" href="#about">Get A Quote Today</a>
        </div>
    </div>
</section>

Answer 1

HTML

rawHtml

CSS

<div class="container">

    <div class="row" style="height:100px; background: #fff;"> this is ok</div>
    <div class="row row-full" style="height:100px; background: #f00;">
        this should take 100% width
    </div>
</div>

Answer 2

因此，使用您的HTML结构，可以使用以下CSS将文本居中放置：

html,body{
  margin:0px;
  padding:0px;
}

.div-with-bg {
    background-image: url(../images/color1.jpg);
    background-repeat: no-repeat;
    background-color: grey;
    /*this is needed to keep image proportion good*/
    background-size: cover;
}

.container div {
text-align:center;
}

从技术上讲，为了帮助回答您的问题，遗嘱总是想作为其所占空间的全部宽度，而不管其宽度是受父节点还是页面的body标签限制。具体来说，由于您提到要使文本居中，因此请将其包含在较低级别的CSS div声明中。

Answer 3

我将代码从“索引”页面移到了布局页面，然后按预期开始工作。我相信在索引页面上显示的布局页面中有一个@Renderbody是导致我出现问题的原因。

如何制作全宽div？

3 个答案: