0
У меня есть боковая панель и основное окно содержимого, однако центрированный текст в главном окне содержимого не отображается в центре экрана. Вместо этого он находится вне центра с боковой панелью. Как я могу это исправить?Выравнивание центра 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/
ПРИМЕЧАНИЕ: центрирование действительно заметны только на больших экранах
EDIT: Я заметил, что теперь, с этим обновленным кодом, e текст находится в центре внимания по ширине боковой панели
попробовать создать [jsfiddle] (http://jsfiddle.net) вашего кода – Ibu
здания от комментария @ Ибу в: создать JSFiddle _in addition_, чтобы опубликовать здесь код. (т. е. не удалять код здесь) –
Это [демо] (http://jsbin.com/EbUPaPA/2), что вы хотите? – aldanux