Question

嘿，我的网页居中问题。当我尝试居中时，只有左侧居中，而右侧伸展。这就是我的网页外观：

screenshot

正如你在上半部分看到的那样，有一个白色的盒子，这个盒子延伸到我居中的页面之外。

所以我希望右侧也能居中。

HTML code：

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="it_seminar.Site1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <link href="StyleSheet1.css" rel="stylesheet" type="text/css" />
    <title>IT-seminar</title>

</head>
<body background="Images/dark-planingwood.png" >
    <form id="form1" runat="server">
    <div id="center">
        <div id="header">

        </div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

CSS：

body {
    text-align:center; 
}
#center {
    position:relative;
    margin: 0 auto;
    width:800px;
    text-align:left;
}
#header {
  height:50px;
    background:#F0F0F0;
    border:1px solid #CCC;
    width:2000px;
    margin:0px auto;
}

Answer 1

正文包含一个800像素宽的居中div。假设身体本身宽度超过800px，这将导致：

然后在#center div中放置一个左对齐的2000px宽div。这将是

（或者至少它会尝试，但当然它会被屏幕边缘切断。）

所以，问题是，你想要什么？

如果您希望整个#header适合#center，请不要让它比#center更宽！换句话说，从其css中删除width。
或者，您希望尽可能多的#header适合屏幕，将其从#center中取出并放在标记之后。即在#center的结束标记</div>之后。

居中页面Css

1 个答案: