【问题标题】：How to align div area to left so its flush with a centered table?如何将 div 区域向左对齐，使其与居中的表格齐平？
【发布时间】：2014-10-23 03:09:28
【问题描述】：

到目前为止，我的网站布局如下：

HTML

<div class="tabArea"> 
    some more code
</div>

<table class="tablesorter">
<tbody>
    some more stuff here
</tbody>
</table>

CSS

table.tablesorter{
    margin:0px auto 0px;
    font-family:sans-serif;
    border-radius: 10px;
    padding-right: 10px;
    padding-left: 10px;
    background-color: #F5F5F5;
    width:750px;
    height:400px;
}

div.tabArea {
    font-weight:bold;
    padding:0px;
    position:relative;
    text-align:center;
}

我会将 tabArea div 对齐到它在左侧与居中的表格齐平。我正在使用文本对齐来居中。但是，整个页面上的 div 居中。此外，如果我向左对齐，那么它将一直向左移动。我如何做到这一点？

【问题讨论】：

您是否要像这样对齐它：tabArea|tablesorter？
所以你想让.tabArea 左对齐？那你可以试试float: left;。

标签： html css

【解决方案1】：

在使用<tbody> 时，您需要使用<tr> 和<td> 标签，否则它会将文本“抛出”表格之外。为了使 tabArea 正确对齐（与表格的左外角），您必须将所有内容放入容器中。试试这个：

<div id="container">
   <div class="tabArea"> some more code</div>
   <table class="tablesorter">
     <tbody>
        <tr>
           <td>some more stuff here</td>
        </tr>
     </tbody>
   </table>
</div>

.tablesorter {
font-family:sans-serif;
border-radius: 10px;
padding: 0 10px 0 10px;
background-color: #F5F5F5;
width:750px;
height:400px;
}
#container { margin: 0 auto; width: 750px;}
.tabArea { font-weight:bold; text-align: left;}

希望这会有所帮助。

【讨论】：

【解决方案2】：

解决办法如下：

http://jsfiddle.net/pgxh6r31/

<div class="tabArea"> 
    some more code
</div>

<table class="tablesorter">
<tbody>
    <tr>
         <td>
           some more stuff here
        </td>
    </tr>
</tbody>
</table> 

table.tablesorter{
    margin:0px auto 0px;
    font-family:sans-serif;
    border-radius: 10px;
    padding-right: 10px;
    padding-left: 10px;
    background-color: #F5F5F5;
    width:750px;
    height:400px;
}

div.tabArea {
    width: 750px;
    font-weight:bold;
    padding:0px;
    position:relative;
    margin: auto;
    border: 1px solid black;
}

table td {
border : 1px solid black;
}

【讨论】：