Question

我试图将我的页面对齐，但我无法让它工作。我已经尝试过其他问题的其他解决方案，但到目前为止，它们都没有为我工作，有谁知道为什么？

这是我想要垂直对齐的HTML代码：

    header {
      margin: 0 auto;
      width: 600px;
      margin-bottom: 3em;
      margin-top: 3em;
      text-align: center;
    }
    section {
      width: 600px;
      margin: 0 auto;
      padding: 3px;
      background-color: white;
    }
    #textbox {
      color: #075488;
      border: solid 3px #075488;
    }
    #textbox div {
      font-weight: bold;
      border-bottom: 2px solid #075488;
      margin-left: 3em;
      margin-right: 3em;
      padding-left: 2em;
      padding-right: 2em;
      padding-top: 1.5em;
      padding-bottom: 1em;
      margin-bottom: 1em;
      text-align: center;
    }
    #textbox table {
      font-weight: normal;
      width: 100%;
      padding-right: 5em;
      padding-left: 4em;
      padding-bottom: 1em;
      margin: 0 auto;
      line-height: 1;
    }
    td:nth-child(3) {
      width: 100px;
    }
    td:nth-child(2) {
      text-align: center;
    }
    section p {
      color: white;
      font-size: 12px;
      float: right;
    }

<header id="header">
  <img src="images/image.png">
</header>
<section id="section">
  <div id="textbox">
    <div>test</div>
    <table>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
    </table>
  </div>
</section>

有没有人知道这方面的解决方案？

谢谢！

如果CSS不可能，可以使用jQuery / Javascript，如果是这样，我将如何去做？

Answer 1

您可以在position: absolute上设置body，并通过以下方式设置中心：

body {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%); /* Safari */
  transform: translate(-50%, -50%);         /* Other browsers */
}

（记得删除标题上的上边距）

＆＃13;

body {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
header {
  margin: 0 auto;
  width: 600px;
  margin-bottom: 3em;
  text-align: center;
}
section {
  width: 600px;
  margin: 0 auto;
  padding: 3px;
  background-color: white;
}
#textbox {
  color: #075488;
  border: solid 3px #075488;
}
#textbox div {
  font-weight: bold;
  border-bottom: 2px solid #075488;
  margin-left: 3em;
  margin-right: 3em;
  padding-left: 2em;
  padding-right: 2em;
  padding-top: 1.5em;
  padding-bottom: 1em;
  margin-bottom: 1em;
  text-align: center;
}
#textbox table {
  font-weight: normal;
  width: 100%;
  padding-right: 5em;
  padding-left: 4em;
  padding-bottom: 1em;
  margin: 0 auto;
  line-height: 1;
}
td:nth-child(3) {
  width: 100px;
}
td:nth-child(2) {
  text-align: center;
}
section p {
  color: white;
  font-size: 12px;
  float: right;
}

＆＃13;

<header id="header">
  <img src="http://placehold.it/600x50">
</header>
<section id="section">
  <div id="textbox">
    <div>test</div>
    <table>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
    </table>
  </div>
</section>

＆＃13;

Answer 2

要使用垂直对齐，您必须为元素提供高度。您的元素当前没有设置的高度，因此它们的高度是包含其内容的最小值，因此它们不会延伸到您的页面高度

Answer 3

你可以说：

td {text-align: center}

http://jsfiddle.net/k30se3fv/3/

垂直对齐不起作用的CSS / HTML

3 个答案: