Html 如何将div区域向左对齐，使其与居中表格齐平？

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

HTML 我将调整tabArea div，使其在左侧与居中表格齐平。我正在使用文本对齐到中心。但是，将在整个页面上居中放置div。此外，如果我向左对齐，那么它将一直向左。如何实现这一点？

在处理时，您可能希望使用and标记，否则它会将文本抛出表外。要使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>

希望这有帮助。

以下是解决方案：

---

你想这样对齐吗：tabArea | tablesorter？那么你想让.tabArea向左对齐吗？然后您可以尝试float:left；。

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;
}

<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;}

<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;
}