如何将 div 元素与另一个 div 元素水平对齐？

Question

我创建了以下 HTML 页面，我将对齐两个 DIV 元素（具有 lista 和 scheda id 的元素，包含在 parent div) 到页面顶部的相同位置。这是我的代码：

#tabella1,
#tabella1 td {
  border: solid 1px;
}
th {
  border: solid 1px;
  font-style: bold;
  background-color: white;
}
#tabella1 tr:nth-child(odd) {
  background-color: gray;
}
#tabella1 tr:nth-child(even) {
  background-color: lightgray;
}
#tabella1 tr:nth-child(n):not(:nth-child(1)):hover {
  background-color: blue;
  color: yellow;
  cursor: pointer;
}
.titolo {
  text-align: center;
  font-weight: bold;
}
#lista {
  display: inline-block;
  margin: 30px;
  position: relative;
  top: 0px;
}
button {
  width: 60px;
  height: 20px;
}
form {
  display: inline-block;
}
#msg {
  font-weight: bold;
}
#scheda {
  display: inline-block;
  position: relative;
  top: 0px;
  text-align: center;
}
#tabella2 td:nth-child(even) {
  border: solid 1px;
}
.cellaVuota {
  width: 140px;
}

<div id="carica">
  <form method="post" action="carica2.php">
    <label for "n">Inserisci nome:
      <input type="text" id="n" name="nome" size="10" />
    </label>
    <button type="submit">Invia</button>
  </form>
  <form method="post" action="carica2.php">
    <button type="submit" name="logout">Logout</button>
  </form>
</div>
<div id="parent">
  <div id="lista">
    <table id="tabella1">
      <tr>
        <th>Modello</th>
        <th>27.5</th>
        <th>29</th>
      </tr>
      <tr>
        <td>Riga 1</td>
        <td>Riga 2</td>
        <td>Riga 3</td>
      </tr>
    </table>
    <p class="titolo">Bici Mountain Bike</p>
  </div>
  <div id="scheda">
    <p class="titolo">Bici selezionata</p>
    <table id="tabella2">
      <tr>
        <td>Modello</td>
        <td class="cellaVuota"></td>
      </tr>
      <tr>
        <td>Misura 27.5</td>
        <td class="cellaVuota"></td>
      </tr>
      <tr>
        <td>Misura 29</td>
        <td class="cellaVuota"></td>
      </tr>
    </table>
  </div>
</div>

我在 post 这个问题之前在这里搜索和搜索（请参阅 CSS 代码中的 position 和 ~top` 属性），但我不知道如何找到我的目的。

Answer 1

只需将 vertical-align: top; 添加到两个 div。您还可以删除 position: relative; 和 top: 0; 属性

如何将 div 元素与另一个 div 元素水平对齐？

How to horizontally align div element to another div?

html

css

css-position

alignment