如何在我的HTML / CSS中心的容器？ [英] How do I center a container in my HTML/CSS?
问题描述
我开发了一个网站作为我的作业的一部分。由于我是新的到html / css我无法从我的代码中找出一些问题。分配规范说明屏幕大小应该是一定的大小，以便大多数浏览器可以打开它，用户不应该经历任何滚动活动。所以我使用div来划分整个页面以适应大小。但是，容器（在我的代码命名为盒子）设置在浏览器主体的左侧，我必须设置它居中，但我不知道如何解决它。任何人都可以给我一些帮助，请谢谢。
I have developed a website as part of my assignment. As I am new to html/css I could not figure some problems out of my code. The assignment specifications says that the screen size should be in certain size so that majority browsers can open it and the user should not experience any scroll activties. So I have used div to divide the whole page to fit the size. However, the container(In my code named as 'box') is set to the left side of the brower body and I have to set it centred, but I do not know how to fix it. Can anyone give me some help, please and thank you.
我的HTML：
<!DOCTYPE html>
<html>
<head>
<title>habibe Naby</title>
<link rel="stylesheet" href="Websystems.css">
</head>
<body>
<div id="box">
<div id="header">
<img id="image" src="spring.jpeg">
<p id="text">Welcome to My Homepage</p>
</div>
<div id="under">
<div id="upper">
<div id="leftbar">
<div class="list">
<ul>
<li><a href="../index.html">Home</a></li>
<li><a href="past.html">Past</a></li>
<li><a href="future.html">Future</a></li>
<li><a href="comments.html">Comments</a>
</li>
</ul>
</div>
</div>
<div id="rightbar">
<div id="title">Habibe Naby</div>
<p>this is my name and
I<spanclass="special">Danny</span>.Ihave a .. </p>
</div>
</div>
<div id="footer">copyrights©</div>
</div>
我的CSS：
body
{
height: 750px;
margin: 2px;
padding: 2px;
width: 1000px;
}
#box
{
width: 1000px;
margin-left: auto;
margin-right: auto;
height:100%;
border:1px solid #8D8D8D;
}
#header
{
height: 150px;
width: 100%;
position: relative;
}
#image
{
height: 150px;
width: 1000px;
}
#text
{
z-index: 100;
position: absolute;
color: darkolivegreen;
font-style: italic;
font-size: 32px;
font-weight: bolder;
left: 300px;
top: 25px;
}
#leftbar
{
float: left;
width: 200px;
height: 560px;
margin: 0px;
padding: 0px;
background-color: azure;
}
.list
{
margin-top: 40px;
margin-left: auto;
text-decoration: underline;
color:blueviolet;
font-size: 20px;
}
.list ul
{
list-style: none;
}
#rightbar
{
float: right;
width: 800px;
height: 560px;
margin: 0px;
padding: 0px;
background: mintcream;
}
#title
{
margin-left: 80px;
margin-top: 30px;
font-size: 28px;
font-weight: normal;
font-style: italic;
color: blueviolet;
}
#footer
{
clear: both;
height: 40px;
text-align: center;
background-color: oliveDrab;
margin 0px;
padding: 0px;
color: white;
}
.special
{
font-size: 20px;
font-weight: bold;
font-family: "New Century Schoolbook", Times, sans-serif;
color: dodgerblue;
}
p, pre
{
padding: 10px 20px;
margin-left: 50px;
margin-right: 50px;
color: darkslateblue;
}
推荐答案
Jsfiddle： http://jsfiddle.net/2gtsK/show/
Jsfiddle: http://jsfiddle.net/2gtsK/show/
从 body 中移除宽度，已将 margin：0 auto 添加到 #box
Removed width from body, Added margin:0 auto to #box
margin：0 auto 与以下相同：
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
。
body
{
height: 750px;
margin: 2px;
padding: 2px;
}
#box
{
width: 1000px;
margin: 0 auto;
height:100%;
border:1px solid #8D8D8D;
}
这篇关于如何在我的HTML / CSS中心的容器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
