0

我有一个侧边栏和一个主内容窗口，但是，主内容窗口中的居中文本不会出现在屏幕中央。相反，它偏离了侧边栏的中心。我将如何解决这个问题？

CSS

@charset"utf-8";
 #header-wrapper {
    padding: 3px;
    height: auto;
    width: 80%;
    margin-top: 10px;
    margin-left: 10%;
    min-width: 780px;
}
#header-navbar-wrapper {
    margin: 0px;
    height: auto;
    width: 100%;
    min-width: 780px;
}
#login {
    margin: 0px;
    height: 30px;
    width: 99.6%;
    background-image: url(/img/login-background.jpg);
    background-repeat: repeat-x;
    color: #FFF;
    padding-top: 0px;
    padding-right: 3px;
    padding-bottom: 0px;
    padding-left: 3px;
    min-width:: 780px;
}
#content-wrapper {
    padding: 3px;
    height: 100%;
    width: 80%;
    margin-top: 10px;
    margin-left: 10%;
    border: solid thin #000;
    min-width: 780px;
    padding: 3px;
}
#content {
    width: 99%;
    padding: 3px;
    text-align: center;
    border: thin dashed;
}
#sidebar {
    padding: 3px;
    height: 100%;
    width: 10%;
    margin-top: 5px;
    float: left;
    color: #FC0;
    background-color: #999;
}
#footer {
    padding: 3px;
    height: 100%;
    width: 80%;
    margin-top: 25px;
    margin-left: 10%;
    min-width: 780px;
    padding: 3px;
    font-size: 9pt;
    text-align: center;
    border-top-width: thin;
    border-top-style: solid;
    border-top-color: #999;
}

和 HTML/PHP

<?php
    require("inc.all.php");
    $_SESSION['lastUrl'] = $_SERVER['REQUEST_URI'];
    $warningDisplay = 0;
    $warning = 0;
    if(isset($_SESSION['username']) && isset($_SESSION['password'])){
        $sql = "SELECT warning FROM user_login";
        $query= $db->query($sql);
        $result = $query->fetch_assoc();
        $warning = $result['warning'];
        if($warning <= 5){
            $warningDisplay = "<font color=\"#00FF00\">$warning</font>";
        }elseif($warning >5 && $warning <= 10){
            $warningDisplay = "<font color=\"#FFFF00\">$warning</font>";    
        }elseif($warning > 10){
            $warningDisplay = "<font color=\"#FF0000\">$warning</font>";
        }
    }
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MinecraftProfiles | Home</title>
<link href="style/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="style/css/main.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="login" align="right">
    <?php
        if(!(isset($_SESSION['username'])&&isset($_SESSION['password']))){
            echo "Welcome, Guest. Please <a href=\"login\" style=\"COLOR:#FC0\">Log in</a> | Don't have an account? <a href=\"create\" style=\"COLOR:#FC0\">Click Here</a>";    
        }else{
            echo "Welcome back, <a href=\"dashboard\" style=\"COLOR:#FC0\">".$_SESSION['username']."</a> | <a href=\"logout\" style=\"COLOR:#FC0\">Logout</a> | PM's: 0 | Warning Level: $warningDisplay";
            if($isAdminViewing){
                echo " | <a href=\"admin/dashboard\" style=\"COLOR:#FC0\">Admin Dashboard</a>"; 
            }
        }
    ?>
</div>
<div id="header-wrapper">
    <div id="header-navbar-wrapper">
        <div class="navbar navbar-inverse">
            <div class="navbar-inner">
                <a href="../index" class="brand">Minecraft Profiles</a>
                <ul class="nav">
                    <li class="active"><a href="../index">Home</a></li>
                    <li><a href="profileList">All Profiles</a></li>
                    <li><a href="userLookup">Find User</a></li>
                    <li><a href="createProfile">Create a new profile</a></li>
                    <li><a href="dashboard">User Dashboard</a></li>
                </ul>
            </div>
       </div>
    </div>
</div>
<div id="content-wrapper" class="row-fluid">

     <div id="sidebar">
        <h5>Featured</h5>
        <?php
            $sql = "SELECT username FROM user_profile WHERE featured='1'";
            $query = $db->query($sql);
            while($row = $query->fetch_assoc()){
                $username = $row['username'];
                echo "<a href=\"viewProfile?usr=$username\" style=\"color:#FC6\">$username</a><br />";
            }
        ?>
    </div>
    <div id="content">
        Content
    </div>
</div>
<div id="footer">
    Minecraft Profiles made by <a href="viewProfile?usr=mrkirby153">mrkirby153</a>.<br />
    <?php
        $sql = "SELECT * FROM user_profile WHERE hideFromUserCount='0'";
        $query = $db->query($sql);
        $profiles = $query->num_rows;

        $sql = "SELECT * FROM user_login";
        $query = $db->query($sql);
        $accounts = $query->num_rows;

        echo "Number of accounts: $accounts | Number of unique profiles: $profiles";
    ?>
</div>
</body>
</html>

JSFillde http://jsfiddle.net/mrkirby153/hbFb8/

注意：居中只在大屏幕上才明显
编辑：我注意到现在，使用此更新的代码，文本偏离了侧边栏的宽度

4

1 回答 1

0

一个简单的解决方法是padding left:在主要内容中设置侧边栏的宽度。

更新

如果侧边栏为 10%，则设置padding-left:10%

于 2013-09-29T00:25:33.743 回答