Question

我无法将#container及其内容垂直对齐。我认为添加更多<div>标签会有问题，我无法控制它们。

我希望文字和#container在.content的中心垂直对齐，而不会增加任何额外的空间。

＆＃13;

#container {
  display: grid;
  padding: 20px;
  grid-template-areas: 'sideone sideone sidetwo sidetwo sidethree sidethree';
  grid-gap: 20px;
  text-align: center;
}

.content {
  display: table;
  margin: 15px;
  height: 500px;
  width: 100%;
  transition-duration: 0.15s;
  border: 2px solid #3B3B3B;
}

＆＃13;

<div class="content">
  <div id="container">
    <div style="grid-area: sideone;">
      <p>あ - ა</p>
      <p>い - ი</p>
      <p>う - უ</p>
      <p>え - ე</p>
      <p>お - ო</p>
    </div>
    <div style="grid-area: sidetwo">
      <p>か - კა</p>
      <p>さ - სა</p>
      <p>た - ტა</p>
      <p>な - მა</p>
      <p>は - ჰა</p>
    </div>
    <div style="grid-area: sidethree">
      <p>き - კი</p>
      <p>し - ში</p>
      <p>ち - ჩი</p>
      <p>に - ნი</p>
      <p>み - მი</p>
    </div>
  </div>
</div>

＆＃13;

Answer 1

将margin:0px auto;添加到.content中，它应该将其与容器的中心对齐。

它应该像这样：

.content {
  display: table;
  margin: 15px;
  height: 500px;
  width: 100%;
  transition-duration: 0.15s;
  border: 2px solid #3B3B3B;
  margin:0px auto;
}

在垂直中心对齐<div>

1 个答案: