色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

如何將兩個平行div的表格在頁面內居中？

CSS
阮建安1年前8瀏覽0評論

我有兩個平行的div，每個div中有一個或多個堆疊的表。

我試圖將頁面中的表格居中，所以對于左邊的表格& ltdiv & gt應移至右側，表格在右側& ltdiv & gt應該移到左邊。我想要50像素的固定水平間距。

用我當前的CSS代碼，我可以向右移動表格。div & gt向左，但是我卻被困在如何向左移動桌子的問題上& ltdiv & gt往右。感謝任何幫助。

輸出電流enter image description here

我正在尋找的輸出enter image description here

這是我的代碼:

<!DOCTYPE html>
<html>
  <head>
    <title>Table Generator</title>
    <style>
      body {
        text-align: center;
      }

      #inputContainer {
        margin-bottom: 20px;
      }

      #tableContainer {
        display: flex;
        justify-content: space-between;
        margin: 0 -25px;
        padding: 40px;
        box-sizing: border-box;
      }

      .tableWrapperLeft {
        width: 50%;
        margin: 0 25px;
        border: 2px solid yellow;
      }

      .tableWrapperRight {
        width: 50%;
        margin: 0 25px;
        border: 2px solid yellow;
      }

      table {
        border-collapse: collapse;
        margin-bottom: 50px;
        width: 288px;
        height: 288px;
      }

      td {
        border: 1px dotted black;
        text-align: center;
      }

      td:first-child {
        border-left: 1px dotted black;
      }

      tr:first-child td {
        border-top: 1px dotted black;
      }

      .tableWrapperRight table {
        border: 2px solid green;
      }

      .tableWrapperLeft table {
        border: 2px solid green;
      }
    </style>
  </head>
  <body>
    <div id="tableContainer">
      <div class="tableWrapperLeft">
        <table>
          <tr>
            <td>V</td><td>W</td><td>E</td><td>G </td>
          </tr>
          <tr>
            <td>G</td><td>K</td><td>L</td><td>D </td>
          </tr>
          <tr>
            <td>W</td><td>F</td><td>U</td><td>N </td>
          </tr>
          <tr>
            <td>G</td><td>A</td><td>Q</td><td>L </td>
          </tr>
        </table>
      </div>
      <div class="tableWrapperRight">
        <table>
          <tr>
            <td>U</td><td>N</td><td>P</td><td>H </td>
          </tr>
          <tr>
            <td>Q</td><td>L</td><td>R</td><td>B </td>
          </tr>
          <tr>
            <td>J</td><td>B</td><td>I</td><td>N </td>
          </tr>
          <tr>
            <td>D</td><td>A</td><td>H</td><td>T </td>
          </tr>
        </table>
      </div>
    </div>
    </div>
  </body>
</html>

更新

使用@fatm提供的解決方案，我在左& quotdiv & quot，如果每個& quotdiv & quot有不止一張桌子，看起來像這樣。

enter image description here

嘗試改變某個div的伸縮方向，然后只需使用flex start或end進行對齊即可。

body {
        text-align: center;
      }

      #inputContainer {
        margin-bottom: 20px;
      }

      #tableContainer {
        display: flex;
        justify-content: space-between;
        margin: 0 -25px;
        padding: 40px;
        box-sizing: border-box;
      }

      .tableWrapperLeft {
        width: 50%;
        margin: 0 25px;
        border: 2px solid yellow;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
      }

      .tableWrapperRight {
        width: 50%;
        margin: 0 25px;
        border: 2px solid yellow;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
      }

      table {
        border-collapse: collapse;
        margin-bottom: 50px;
        width: 288px;
        height: 288px;
      }

      td {
        border: 1px dotted black;
        text-align: center;
      }

      td:first-child {
        border-left: 1px dotted black;
      }

      tr:first-child td {
        border-top: 1px dotted black;
      }

      .tableWrapperRight table {
        border: 2px solid green;
      }

      .tableWrapperLeft table {
        border: 2px solid green;
      }

<body>
    <div id="tableContainer">
      <div class="tableWrapperLeft">
        <table>
          <tr>
            <td>V</td><td>W</td><td>E</td><td>G </td>
          </tr>
          <tr>
            <td>G</td><td>K</td><td>L</td><td>D </td>
          </tr>
          <tr>
            <td>W</td><td>F</td><td>U</td><td>N </td>
          </tr>
          <tr>
            <td>G</td><td>A</td><td>Q</td><td>L </td>
          </tr>
        </table>
      </div>
      <div class="tableWrapperRight">
        <table>
          <tr>
            <td>U</td><td>N</td><td>P</td><td>H </td>
          </tr>
          <tr>
            <td>Q</td><td>L</td><td>R</td><td>B </td>
          </tr>
          <tr>
            <td>J</td><td>B</td><td>I</td><td>N </td>
          </tr>
          <tr>
            <td>D</td><td>A</td><td>H</td><td>T </td>
          </tr>
        </table>
      </div>
    </div>

body {
  text-align: center;
}

#inputContainer {
  margin-bottom: 20px;
}

#tableContainer {
  display: flex;
  justify-content: space-between;
  margin: 0 -25px;
  padding: 40px;
  box-sizing: border-box;
}

.tableWrapperLeft {
  width: 50%;
  margin: 0 25px;
  border: 2px solid yellow;
  display: flex;
  justify-content: end;
}


}
.tableWrapperRight {
  width: 50%;
  margin: 0 25px;
  border: 2px solid yellow;
}
table {
  border-collapse: collapse;
  margin-bottom: 50px;
  width: 288px;
  height: 288px;
}
td {
  border: 1px dotted black;
  text-align: center;
}
td:first-child {
  border-left: 1px dotted black;
}
tr:first-child td {
  border-top: 1px dotted black;
}
.tableWrapperRight table {
  border: 2px solid green;
}
.tableWrapperLeft table {
  border: 2px solid green;
}

<div id="tableContainer">
  <div class="tableWrapperLeft">
    <table>
      <tr>
        <td>V</td>
        <td>W</td>
        <td>E</td>
        <td>G </td>
      </tr>
      <tr>
        <td>G</td>
        <td>K</td>
        <td>L</td>
        <td>D </td>
      </tr>
      <tr>
        <td>W</td>
        <td>F</td>
        <td>U</td>
        <td>N </td>
      </tr>
      <tr>
        <td>G</td>
        <td>A</td>
        <td>Q</td>
        <td>L </td>
      </tr>
    </table>
  </div>
  <div class="tableWrapperRight">
    <table>
      <tr>
        <td>U</td>
        <td>N</td>
        <td>P</td>
        <td>H </td>
      </tr>
      <tr>
        <td>Q</td>
        <td>L</td>
        <td>R</td>
        <td>B </td>
      </tr>
      <tr>
        <td>J</td>
        <td>B</td>
        <td>I</td>
        <td>N </td>
      </tr>
      <tr>
        <td>D</td>
        <td>A</td>
        <td>H</td>
        <td>T </td>
      </tr>
    </table>
  </div>
</div>
</div>