CSS居中对齐

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

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/

注：该中心是真的只在大屏幕上明显
编辑：我注意到，现在，用这个更新的代码，那个e文由侧边栏

来源

2013-09-29 mrkirby153

尝试创建一个[的jsfiddle（http://jsfiddle.net）代码 – Ibu

大厦关闭@ IBU的评论的：创建一个JSFiddle在这里发布代码。（即不要在这里删除代码） –

这是[演示]（http://jsbin.com/EbUPaPA/2）你想要什么？ – aldanux

一个简单的办法是在主内容padding left:您的侧条的宽度的宽度被偏离中心。

UPDATE

如果侧边栏是10％设置padding-left:10%

来源

2013-09-29 00:25:33 otherDewi

我会放什么填充左：？请记住，大小是动态的 – mrkirby153

UPDATE：这使下面的内容侧边栏，我想它INLINE – mrkirby153

您需要调整内容的宽度。鉴于您的原始宽度为87％，添加10％填充会留下77％的宽度。例如，如果您的元素拉伸100％的容器，则两边添加10％的边距，左边的5％填充会将元素吹出至容器宽度的125％。所以留给内容的空间是75％。 – otherDewi

CSS居中对齐

回答

相关问题