我在SB Admin v2.0的设计中遇到了问题。我把原来的css修改为RTL，但现在中间的div内容遍历了整个页面。我希望它在页面中间。
这是我的HTML：
<!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 runat="server" dir="rtl">
<title>Sp</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link href="../css/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="../css/plugins/metisMenu/metisMenu.min.css" rel="stylesheet">
<!-- Timeline CSS -->
<link href="../css/plugins/timeline.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="../css/sb-admin-2.css" rel="stylesheet">
<!-- Morris Charts CSS -->
<link href="../css/plugins/morris.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="../font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body dir="rtl">
<form runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="BHome.aspx"></a>
</div>
<!-- /.navbar-header -->
<ul class="nav navbar-top-links navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-user fa-fw"></i><i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li>
<a href="../Users/Users.aspx"><i class="fa fa-gear fa-fw"></i>User Settings</a>
</li>
<li class="divider"></li>
<li>
<a href="../Login.aspx"><i class="fa fa-sign-out fa-fw"></i>Sign-out</a>
</li>
</ul>
<!-- /.dropdown-user -->
</li>
<!-- /.dropdown -->
</ul>
<!-- /.navbar-top-links -->
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="...بحث">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
<!-- /input-group -->
</li>
<li>
<a class="active" href="BHome.aspx">
Home<i class="fa fa-dashboard fa-fw"></i>
</a>
</li>
<li>
<a href="#"><i class="fa fa-edit fa-fw"></i>Main<span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li>
<a href="~/Customers/Customers.aspx"
title="Cusomers">Cusomers</a>
</li>
</ul>
<!-- /.nav-second-level -->
</li>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">
<asp:Label ID="ContentTitleLabel" runat="server"></asp:Label>
</h1>
<asp:ContentPlaceHolder ID="MainContent" runat="server">
<tbody>
<tr>
<td align="right">
<table style="width: 100%">
<tbody>
<tr>
<td class="ui-widget-header">رقم العميل</td>
<td>
<input name="ctl00$MainContent$txtSearchCustomerID" type="text" id="ctl00_MainContent_txtSearchCustomerID" />
</td>
<td class="ui-widget-header">اسم العميل</td>
<td>
<input name="ctl00$MainContent$txtSearchCustomerName" type="text" id="ctl00_MainContent_txtSearchCustomerName" />
</td>
<td>
<input type="submit" name="ctl00$MainContent$cmdSearch" value="بحث" id="ctl00_MainContent_cmdSearch" class="submit" />
</td>
</tr>
<tr>
<td class="ui-widget-header">العنوان</td>
<td>
<input name="ctl00$MainContent$txtSearchAddress" type="text" id="ctl00_MainContent_txtSearchAddress" />
</td>
<td class="ui-widget-header">التليفون</td>
<td>
<input name="ctl00$MainContent$txtSearchTelephone1" type="text" id="ctl00_MainContent_txtSearchTelephone1" />
</td>
<td>
<input type="submit" name="ctl00$MainContent$cmdAddNew" value="عميل جديد" id="ctl00_MainContent_cmdAddNew" class="submit" />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<span id="ctl00_MainContent_lblRecordsFound">سجلات 1</span>
<div>
<table class="PCG-Content" cellspacing="0" rules="all" border="1" id="ctl00_MainContent_grd" style="width:100%;border-collapse:collapse;">
<tbody>
<tr class="ui-widget-header">
<th class="BoundFieldHeaderStyleHidden" scope="col"> </th>
<th scope="col"><a href="javascript:__doPostBack('ctl00$MainContent$grd','Sort$Customers.CustomerID')"><div><div style="float:left;">رقم العميل</div><div class="ui-icon ui-icon-carat-2-n-s" style="float:right;"></div></div></a></th>
<th scope="col"><a href="javascript:__doPostBack('ctl00$MainContent$grd','Sort$Customers.CustomerName')"><div><div style="float:left;">اسم العميل</div><div class="ui-icon ui-icon-carat-2-n-s" style="float:right;"></div></div></a></th>
<th scope="col"><a href="javascript:__doPostBack('ctl00$MainContent$grd','Sort$Customers.Address')"><div><div style="float:left;">العنوان</div><div class="ui-icon ui-icon-carat-2-n-s" style="float:right;"></div></div></a></th>
<th scope="col"><a href="javascript:__doPostBack('ctl00$MainContent$grd','Sort$Customers.Telephone1')"><div><div style="float:left;">رقم التليفون 1</div><div class="ui-icon ui-icon-carat-2-n-s" style="float:right;"></div></div></a></th>
<th scope="col"><a href="javascript:__doPostBack('ctl00$MainContent$grd','Sort$Customers.Telephone2')"><div><div style="float:left;">رقم التليفون 2</div><div class="ui-icon ui-icon-carat-2-n-s" style="float:right;"></div></div></a></th>
<th scope="col"><a href="javascript:__doPostBack('ctl00$MainContent$grd','Sort$Customers.Telephone3')"><div><div style="float:left;">رقم التليفون 3</div><div class="ui-icon ui-icon-carat-2-n-s" style="float:right;"></div></div></a></th>
<th scope="col"> </th>
</tr>
<tr class="ui-widget-content">
<td class="BoundFieldItemStyleHidden">1</td>
<td>1</td>
<td>Name</td>
<td>Address</td>
<td>Address 2</td>
<td>7</td>
<td>8</td>
<td><input type="button" value="Edit" onclick="javascript:__doPostBack('ctl00$MainContent$grd','$0')" class="GridEditButton" /></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td>
<input type="submit" name="ctl00$MainContent$cmdFirst" value="<<" id="ctl00_MainContent_cmdFirst" disabled="disabled" class="submit" />
<input type="submit" name="ctl00$MainContent$cmdPrevious" value="<" id="ctl00_MainContent_cmdPrevious" disabled="disabled" class="submit" />
<span id="ctl00_MainContent_lblPageNumber"> صفحة 1 من1</span>
<input type="submit" name="ctl00$MainContent$cmdNext" value=">" id="ctl00_MainContent_cmdNext" disabled="disabled" class="submit" />
<input type="submit" name="ctl00$MainContent$cmdLast" value=">>" id="ctl00_MainContent_cmdLast" disabled="disabled" class="submit" />
</td>
</tr>
</tbody>
</asp:ContentPlaceHolder>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</div>
<!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
<!-- jQuery Version 1.11.0 -->
<script src="../js/jquery-1.11.0.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="../js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="../js/plugins/metisMenu/metisMenu.min.js"></script>
<!-- Morris Charts JavaScript -->
<script src="../js/plugins/morris/raphael.min.js"></script>
<script src="../js/plugins/morris/morris.min.js"></script>
<%--
<script src="../js/plugins/morris/morris-data.js"></script>--%>
<!-- Custom Theme JavaScript -->
<script src="../js/sb-admin-2.js"></script>
</form>
</body>
</html>
这是我修改过的CSS：
#wrapper {
width: 100%;
float: right;
}
#page-wrapper {
padding: 0 15px;
min-height: 568px;
background-color: #fff;
float: right;
}
@media(min-width:768px) {
#page-wrapper {
position: inherit;
margin: 0 0 0 250px;
text-align: center;
width: 100%;
padding: 0 0 0 0px;
border-left: 1px solid #e7e7e7;
float: right;
}
}
答案 0 :(得分：0)
你的宽度：100％的款式阻止它居中。尝试这样的事情：
#wrapper {
}
#page-wrapper {
min-height: 568px;
background-color: #fff;
}
@media(min-width:768px) {
#page-wrapper {
position: inherit;
margin: 0 auto;
text-align: center;
max-width: 700px;
padding: 0 0 0 0px;
border-left: 1px solid #e7e7e7;
}
}
它基本上归结为给元素一个宽度或最大宽度，并将左右边距设置为自动。