Question

我正在建立一个包含3个“主要”元素的网站，一个横幅，一个导航部分和内容部分（参见联合图像）Site Plane。但是，我想知道使用CSS propreties在垂直（我的意思是左右）轴上排列不同元素的“正确”方法是什么。我已经调查了静态，绝对，相对属性，但没有什么工作。我显然做错了但我该怎么办？

这是我的CSS代码

     @font-face { font-family: Florsn17; src: url('fonts/Florsn17.ttf'); } 
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px gray; 
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px white; 
}

body {
    font-family:Arial,Helvettica,sans-serrif;
    background-image:url("images/background.jpg");
    background-color:black;
}

header {
    background-color:black;
    height:300px;
    width:720px;
    float:center;
    border-style:ridge;
    border-width:1px;
    margin-left:auto;
    margin-right:auto;
}

div#center {
    background-color:#333;
    background-image:url("images/menuBarBackground.jpg");
    border-style:ridge;
    border-width:1px;
    width:720px;
    height:86px;
    margin-left:-1px;
    margin-right:auto;
}

li#item_Home {
    margin-left:-40px;
    margin-top:-16px;
}

ul#menu li {
    float: left;
    list-style-type:none;
    padding:0px;
}

li a {
    display: block;
    color: white;
    text-align: center;
    text-decoration: none;
    padding:16px;
    padding-right:30px;
    padding-left:30px;
}

li a:hover {
    background-color: #111;
}

.current {
    background-color:#111;
}

#mainSection{
    background-color:#262626;
    opacity:0.8;
    position:relative;
    top:20px;
    left:-112px;
    width:720px;
    border-style:ridge;
    border-width:1px;
    overflow:auto;
}

#mainSection article {
    font-family: Florsn17,Arial,Helvettica,sans-serrif;
    color:white;
    padding:20px;
    line-height:1.5em;

}

#video {
    padding-bottom:10px;
}

#googleMapScreenCap {
    padding-top:20px;
    padding-bottom:10px;
}

感谢您的帮助！

Answer 1

使用包含所有其他HTML元素的容器div ，然后添加以下CSS规则以使容器居中并且它包含元素：

<强> HTML

<body>
 <div class="container">
   <!-- header, navbar, etc -->
 </div>
</body>

<强> CSS

.container {
   margin: 0 auto;
}

Answer 2

我认为Copy Always是横幅，header是导航，div#center是内容。首先，我看到所有这些都有，例如#mainSection你可以创建一个包含所有这些的包装器（div），或者一个类来赋予它们相同的宽度（以及它们的所有属性）有共同点）。包装是最好的选择。此外，在该包装器/类中，您将width:720px;设置为居中它们。

HTML5 / CSS3主要排列元素

2 个答案: