Question

好的，所以我有一个简单的网站，顶部有一个100px H1的大头，我有一个h2和一个下面的段落，两者都居中。

这些都排好了。

问题是，h2和p位于透明黑色的div中，以便于在背景下轻松读取，并且距离h1标题有点太远了。 div本身被锁定到位，h2和p当然在div内。我想要将div移动一点，但无论我如何更改顶部属性，它都不会移动。

*注意：h1根本不在div内，也不在header标签内。它只是在身体标签中。

我已经研究了这一点，有些人告诉我要将div锁定在绝对位置或相对位置的位置改变，但似乎所做的就是使div和其中的所有内容都不居中不再，它仍然被锁定到位。网站的代码有点长，所以我将为问题中涉及的每个元素包含html布局和css。如果您需要更多帮助我，请告诉我:)

HTML：

<body class="home-page">
    <h1>Visit Montana</h1>
    <div class="navbar">
        <a href="home.html">
            <button id="home">
                home
            </button>
        </a>
        <a href="dining.html">
            <button id="dining">
                dining
            </button>
        </a>
        <a href="entertainment.html">
            <button id="entertainment">
                entertainment
            </button>
        </a>
        <a href="lodging.html">
            <button id="lodging">
                lodging
            </button>
        </a>
    </div>
    <div class="main-body">
        <h2>
            Why Visit Montana?
        </h2>
        <p>
            words (I modified this so it wouldn't be a wall of text. There     are 200 words here)
        </p>
    </div>
</body>

的CSS：

h1{
        text-align:center;
        color:white;
        position:relative;
        font-size:100px;
        font-family: 'Poiret One', cursive;
        padding:0;
        z-index:6;      
    }

h2{
        font-size:50px;
        text-align:center;
        color:white;
         position:relative;
        font-family: 'Poiret One', cursive;
        padding:20px 0px 0px 0px;
    }

p{
    font-size:30px;
    text-align:left;
    color:white;
    position:relative;
    font-family: 'Poiret One', cursive;
    padding:0px 40px 0px 40px;
}

.main-body{
    background-color:rgba(15, 15, 15, 0.57);
    height:425px;
    width:1100px;
    margin-left: auto;
    margin-right: auto; 
}

Answer 1

首先，您应该删除浏览器的所有默认填充和边距。请使用以下内容。

* {
    margin: 0;
    padding: 0;
}

然后你可以margin-top给.main-body div来上下移动它们。

.main-body {
    background-color: rgba(15, 15, 15, 0.57);
    height: 425px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px; //Here.
    width: 1100px;
}

我在这里给margin-top:20px。您可以根据自己的要求进行更改。

<强> Working Fiddle

居中的div锁定到位，无法上下移动

1 个答案: