HTML＆amp; CSS：不能将我的表放在中心位置

Question

我很难让我的3个表格在页面中居中。

以下是目前的情况：

基本上（从图像看），我希望第二个/中间表（“工作”表）是中心唯一的表，另外两个表（“关于”和“协作”表;左边和分别从中间开始分散（使用保证金，我会假设）。

这是我的HTML：

.fixedWidth2 {
  margin: 0 auto;
  width: 1000px;
  height: 350px;
  background-color: green;
  border: 2px solid yellow;
}

.tableProp1 {
  width: 200px;
  float: left;
  margin-left: ;
}

.tableProp1 tr td {
  height: 200px;
  color: red;
}

.tableProp2 {
  margin-left: 40px;
  width: 200px;
  float: left;
}

.tableProp2 tr td {
  height: 200px;
  color: pink;
}

.tableProp3 {
  margin-left: 40px;
  width: 200px;
  float: left;
}

.tableProp3 tr td {
  height: 200px;
  color: blue;
}

<div id="mainContent">
  <div class="fixedWidth2">
    <table class="tableProp1" border="1">
      <tr>
        <th>About</th>
      </tr>
      <tr>
        <td>Learn more about me and my accomplishments.</td>
    </table>
    <table class="tableProp2" border="1">
      <tr>
        <th>Work</th>
      </tr>
      <tr>
        <td>I tend to get involved with a lot of different projects. Ranging from a simple photoshop gig to having a small role in a television/pilot</td>
      </tr>
    </table>
    <table class="tableProp3" border="1">
      <tr>
        <th>Collaborate</th>
      </tr>
      <tr>
        <td>Have a brand new or idea of a project? Whatever help you may need, I may be of some assistance to</td>
      </tr>
    </table>
  </div>
  <!-- Fixed Width 2 DIV for Main Content DIV -->
</div>
<!-- mainContent DIV -->

Answer 1

由于你正在为表使用固定宽度而你是浮动它们，我会将它们包装在一个容器中，设置宽度以匹配所有三个表+ margin并在容器上设置margin: auto < / p>

.table-wrapper{
  width: 680px;
  margin: auto;
}

JSFIDDLE

或者，您可以使用display: inline-block代替float:left，并将text-align: center添加到.fixedWidth2

ALT FIDDLE

Answer 2

我根本不会使用<table> ...表格适用于表格内容，不适用于模板.... 我会使用DIV甚至是HTML5＆＃39 <article>和<section>。
想想搜索引擎优化，<h2>是一个更好的镜像到你的网站语义搜索引擎，而不是表TH ...

要将三个元素居中，您可以使用display: inline-block;设置vertical-align，而不是将<div class="centered">设置为text-align: center;，这将使您的内部元素居中对齐。您也可以使用float:left;，但我没有涵盖该示例。

http://jsbin.com/roruqo/1/

<div id="container">

  <div id="slider"></div>

  <div id="mainContent">

    <div class="centered">
      <div class="fixedWidth2">
        <h2>About</h2>
        <p>Learn more about me and my accomplishm...</p>
      </div>
      <div class="fixedWidth2">
        <h2>Work</h2>
        <p>I tend to get involved with a lot of d...</p>
      </div>
      <div class="fixedWidth2">
        <h2>Collaborate</h2>
        <p>Have a brand new or idea of a project?...</p>
      </div>
    </div>

  </div><!-- mainContent DIV -->


</div>

h2, p{
  padding:15px;
  margin:0;
}

#container{
  width:960px;
  margin:0 auto;
  background:#eee;
}
#slider{
  background:blue;
  height:400px;
}
.centered{
  text-align:center;
}
.centered > div{
  text-align:left;
}
.fixedWidth2{
  min-height:170px;
  background:#ddd;
  display:inline-block;
  vertical-align:top;
  width: 250px;
  margin: 15px;
}
.fixedWidth2 h2{
  text-align:center;
  background:#aaa;
}

Answer 3

        <div id="mainContent">
          <div class="fixedWidth2">
            <div class="row">
            <table class="tableProp1" border="1">
              <tr>
                <th>About</th>
              </tr>
              <tr>
                <td>Learn more about me and my accomplishments.</td>
            </table>
            <table class="tableProp2" border="1">
              <tr>
                <th>Work</th>
              </tr>
              <tr>
                <td>I tend to get involved with a lot of different projects. Ranging from a simple photoshop gig to having a small role in a television/pilot</td>
              </tr>
            </table>
            <table class="tableProp3" border="1">
              <tr>
                <th>Collaborate</th>
              </tr>
              <tr>
                <td>Have a brand new or idea of a project? Whatever help you may need, I may be of some assistance to</td>
              </tr>
            </table>
        </div>
          </div>

        </div>


    add this style in style sheet

    .row {
        margin: 0 auto;
        width: 680px;
    }


add  "row " division and apply this style then check  it's working properly.