Question

我的“Page [0]”文字不在我的网页中心。谁知道为什么？我可以真的使用一些帮助。

这是html：

<html>
    <head>

        <title>Test Forum</title>
        <link href="http://prime.programming-designs.com/test_forum/style.css" rel="stylesheet" type="text/css" />


    </head>

    <body>

        <a href="http://prime.programming-designs.com/test_forum/"><img src="http://prime.programming-designs.com/test_forum//images/banner1.png" alt="" id="banner" /></a>

        <h1>Test Forums</h1>


        <hr />

        <div id="navi"><div id="naviheader">Boards</div><a href="http://prime.programming-designs.com/test_forum/viewboard.php?board=0">Testing</a><br /><a href="http://prime.programming-designs.com/test_forum/viewboard.php?board=1">General Discussion</a><br /><a href="http://prime.programming-designs.com/test_forum/viewboard.php?board=2">Video Games</a><br /><a href="http://prime.programming-designs.com/test_forum/viewboard.php?board=3">Anime and Manga</a><br /><a href="http://prime.programming-designs.com/test_forum/viewboard.php?board=4">BlazBlue</a><br /><a href="http://prime.programming-designs.com/test_forum/viewboard.php?board=5">Shin Megami Tensei</a><br /><a href="http://prime.programming-designs.com/test_forum/viewboard.php?board=6">Earthbound</a><br /><a href="http://prime.programming-designs.com/test_forum/viewboard.php?board=7">Phantasy Star</a><br /><a href="http://prime.programming-designs.com/test_forum/viewboard.php?board=8">Mobile Suit Gundam</a><br /></div>      
        <div class="postbox"><h4>CyanPrime</h4><hr />Welcome to the King's Gate BBS!</div>Page: [<a href="http://prime.programming-designs.com/test_forum/index.php?page=0">0</a>]      
    </body>
</html>

这是CSS：

@charset "windows-1252";    

body{
    background-color: #EEFFF8;
    color: #000000;
    text-align: center;
}

.postbox{
    text-align: left;
    margin: auto;
    background-color: #dbfef8;
    border: 1px solid #82FFCD;
    width: 50%;
    margin-top: 10px;
}   

.stickypostbox{
    text-align: left;
    margin: auto;
    background-color: #F5FFFA;
    border: 1px solid #82FFCD;
    width: 50%;
    margin-top: 10px;
}   

h4{
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    color: #9932CC;
}

h1{
    color: #551A8B;
}

hr{
    color: #82FFCD;
    background-color: #82FFCD;
    height: 1px;
    border: 0px dotted #82FFCD;
}

a{
    color: #7F00FF;
    text-decoration: none;
}

a:hover{
    color: #7F00FF;
    text-decoration: underline;
}

form{
   margin: 0px auto;
   width: 50%;
}

#formdiv {
  background-color:#dbfef8;
  border:1px solid #82FFCD;
}


.fielddiv1{
    background-color: #f9f9f9;
    border: 1px solid #DBFEF8;
    vertical-align: middle;
    width: 45%;
    float: left;
}

.fielddiv2{
    background-color: #f9f9f9;
    border: 1px solid #DBFEF8;
    vertical-align: middle;
    width: 100%;
}

.fieldtext1{
    width: 50%;
    background-color: #82FFCD;
    float: left;
}

.fieldtext2{
    width: 100%;
    background-color: #82FFCD;
}

#replydiv{
    width: 100%;
    background-color: #DBFEF8;
    margin: 10px 0 10px 0;
}

#admindiv{
    width: 100%;
    background-color: #DBFEF8;
    margin: 10px 0 10px 0;
}

#navi{
    width: 200px;
    background-color: #dbfef8;
    border: 1px solid #82FFCD;
    text-align: left;
    float: left;
}

#naviheader{
    width: 100%;
    background-color: #82FFCD;
}

#submitbutton{
    border: 1px solid #82FFCD; 
    background-color: #DBFEF8; 
    color: #000000; 
    margin-top: 5px; 
    width: 100px; 
    height: 20px;
}

#banner{
    border: 1px solid #82FFCD;
}

.postbar{
margin-right: 0px;
margin-top: 0px;
}

.bannedtext{
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    color: #FF0000;
}

这是网页，所以你可以得到一些上下文（你会发现我的“page [0]”集中在其他板上，而不是索引。http://prime.programming-designs.com/test_forum/

Answer 1

左侧的浮动将内容推向右侧。它仍然在整个线条的中心，但它不在页面中心。向.postbox添加较大的下边距说明了这一点。

Centreing problem illustrated http://img169.imageshack.us/img169/9027/williamhtmlproblem.png

我的建议是将页脚包裹在<div>中。 clear: both;（或仅left），在任一端添加边距以补偿浮动元素，或者让position: absolute; left: 0; right: 0;强制在整个页面中心。

Answer 2

变化：

Page: [<a href="http://prime.programming-designs.com/test_forum/index.php?page=0">0</a>]

To（用分页器类将其包装在div中）：

<div class="pager">Page: [<a href="http://prime.programming-designs.com/test_forum/index.php?page=0">0</a>]</div>

在CSS中更改此内容：

.postbox, .pager{
  text-align: left;
  margin: auto;
  width: 50%;
  margin-top: 10px;
} 
.postbox { 
  background-color: #dbfef8;
  border: 1px solid #82FFCD;
}
.pager { 
  text-align: center;
}

发生这种情况的原因是因为你的浮动正在推动你的内容。你的寻呼机直接从身体标签上取下来。通常，最好将纯文本包装在html元素中。

您可能想要重新访问网页的结构。创建一个左列和一个中心列div或类似的东西。

为什么我的“Page [0]”不在我的网页中心？

2 个答案: