Question

我正在尝试让我的网页水平扩展以适应任何浏览器窗口，但仍然将内容置于页面中间。我设法做了一个或另一个，但不能为我的生活弄清楚如何使两者同时工作。如果我将宽度和高度设置为100％并将体边距设置为0自动它可以很好地工作但是我的内容不再居中并且所有div最终相互重叠。但是，如果我将宽度设置为900px，那么它全部居中并且看起来很棒。但它周围有空白区域，因为它没有扩展到适合浏览器窗口。

任何人都可以告诉我这项工作的诀窍吗？我希望它看起来像this page，其中两侧扩展以适应浏览器，但所有内容仍然居中于中间：

另外，这是我的CSS：

<style type="text/css">
body {
text-align:center;
margin:0px; 
padding:0px;
width:100%;
height:100%;
}

body#home a#nav-home,
body#resume a#nav-resume,
body#portfolio a#nav-portfolio,
body#contact a#nav-contact
{
color: #dfadec;
text-decoration:none;
}

#container {
background-color:#eae5e5;
width:900px;
text-align:left;
margin: 0 auto;
height:auto;
}

#main {
padding-top:200px !important;
padding-bottom:120px !important;
width:900px;
margin-left: auto;
margin-right:auto;
}

#header {
position:fixed;
border-top:solid 15px #4d4d4f;
font-family:Open Sans;
font-size:30px;
color:#4d4d4f;
background-color:#FFF;
width:900px;
padding-bottom:45px;
}

#title {
padding-top:30px;
position:absolute;
margin-left:60px;
}

#footer {
color:#FFF;
position:fixed;
font-family:Open Sans;
font-size:12px;
background-color:#dfadec;
width:900px;
padding-bottom:45px;
padding-top:45px;
margin: 0 auto;
height: auto;
}

#nav {
padding-top:70px;
font-size:12px;
color:#CCC;
margin-left:570px;
}

#nav a:link {
color:#CCC;
text-decoration:none;
}

#nav a:hover {
color:#dfadec;
text-decoration:none;
}

h1 {
font-size:60px;
font-family:Open Sans;
color:#4d4d4f;
margin-top:-150px;
}

h2 {
font-size:40px;
font-family:Open Sans;
color:#4d4d4f;
font-weight:normal;
margin-top:-40px;
}

#resume {
background:#5c5c54;
width:130px;
height:130px;
font-family:Open Sans;
color:#FFF;
margin-left:5px;
text-align:center;
position:absolute;
-webkit-transition-property:color, background; 
-webkit-transition-duration: 0.5s; 
-webkit-transition-timing-function: linear, ease-in; 
}

#resume p {
vertical-align:middle;
padding-top:45px;
font-size:12px;
}

#resume:hover {
background-color:#373732;
color:#FFF;
}

#work {
background:#dfadec;
width:130px;
height:130px;
font-family:Open Sans;
color:#FFF;
margin-left:150px;
text-align:center;
position:absolute;
-webkit-transition-property:color, background; 
-webkit-transition-duration: 0.5s; 
-webkit-transition-timing-function: linear, ease-in; 
}

#work p {
vertical-align:middle;
padding-top:45px;
font-size:12px;
}

#work:hover {
background-color:#705676;
color:#FFF;
}

#skills {
background:#4d4d4f;
width:130px;
height:130px;
font-family:Open Sans;
color:#FFF;
margin-left:295px;
text-align:center;
position:absolute;
-webkit-transition-property:color, background; 
-webkit-transition-duration: 0.5s; 
-webkit-transition-timing-function: linear, ease-in; 
}

#skills p {
vertical-align:middle;
padding-top:45px;
font-size:12px;
}

#skills:hover {
background-color:#262628;
color:#FFF;
}

img#icon {
background-color:#4d4d4f; 
padding:12px;
}

#intro {
width: 400px;
font-family: Open Sans;
font-size: 12px;
color: #4d4d4f;
margin-left: 320px;
position: absolute;
left: 500px;
top: 522px;
text-align:justify;
}

</style>

有什么建议吗？请告诉我。如果我需要发布HTML，请告诉我。我只是想问题是在CSS中，因为那是我定义宽度等等。

谢谢！

普加

Answer 1

尝试类似这样的东西 - 使内容垂直和水平居中的基本CSS。

http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/

Answer 2

试试这个

<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" width="70%">right</td>
<td valign="top" width="30%">left</td>
</tr>
</table>

如何使网页居中并使其扩展以适应浏览器

2 个答案: