我怎样才能把我所有的里都放在中间，这样它们才能正确对齐

Question

我想给出 Watch 4 的规格 table。现在，我有这个代码。

<div class="specs">
      <ul class="info">
        <li>Lengte</li>
        <li>44 mm</li>
      </ul>
    </div>
    <div class="specs">
      <ul class="info">
        <li>Breedte</li>
        <li>43.3 mm</li>
      </ul>
    </div>

使用此 CSS 代码

.specs{
  position: relative;
  top: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.info{
  display: flex;
  flex-direction: row;
  color: black;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  border-bottom: 1px black solid;
  padding: 0;
}
.info li{
  display: flex;
  flex-direction: row;
  margin-right: 200px;
  margin-left: 200px;
}

这是完整的项目https://jsfiddle.net/2wvfyg16/ 您可能需要将 CSS 标签扩大。

一直在“Verbindingen”选项卡的底部。都是错的。

Answer 1

由于数据显示为表格形式，此代码段是在 HTML table.

中设置带有间距的两列的简单开始

显然，您需要进行更改以提供您想要的确切布局，但它确实表明 HTML table 可以提供所需的格式。

#specs {
  width: 100vw;
  border-collapse: collapse;
}

#specs th {
  font-size: 3em;
  text-align: left;
  padding-top: 1em;
}

#specs td {
  width: 50%;
  padding: 1em 5em;
}

#specs td {
  font-size: 2em;
}

#specs tr:not(.cat) {
  border-bottom: solid 1px black;
  padding: 1em;
}

<table id="specs">
  <tr class="cat">
    <th colspan="2">Formaat</th>
  </tr>
  <tr>
    <td>Lengte</td>
    <td>44 mm</td>
    <tr>
      <td>Breedte</td>
      <td>43.3 mm</td>
    </tr>
    <tr>
      <td>Hoogte</td>
      <td>9.8 mm</td>
    </tr>
    <tr>
      <td>Gewicht</td>
      <td>30 gram</td>
    </tr>
    <tr>
      <td>Stofdicht</td>
      <td>Ja</td>
    </tr>
    <tr>
      <td>Spatwaterdicht</td>
      <td>Ja</td>
    </tr>
    <tr>
      <td>Waterdicht</td>
      <td>Ja</td>
    </tr>
    <tr class="cat" colspan="2">
      <th colspan="2">Display</th>
    </tr>
    <tr>
      <td>Schermgrootte</td>
      <td>40 &amp; 44 mm</td>
    </tr>
    <tr>
      <td>Schermtype</td>
      <td>OLED</td>
    </tr>
    <tr class="cat" colspan="2">
      <th colspan="2">Processor</th>
    </tr>
    <tr>
      <td>Chipset</td>
      <td>Samsung Exynos W920</td>
    </tr>
    <tr>
      <td>Opslagcapaciteit</td>
      <td>16 GB</td>
    </tr>
    <tr>
      <td>Werkgeheugen</td>
      <td>1500 MB</td>
    </tr>
    <tr class="cat" colspan="2">
      <th colspan="2">Software</th>
    </tr>
    <tr>
      <td>Besturingssysteem</td>
      <td>One UI Watch</td>
    </tr>
    <tr class="cat" colspan="2">
      <th colspan="2">Sensoren</th>
    </tr>
    <tr>
      <td>Accelerometer</td>
      <td>Jas</td>
    </tr>
    <tr>
      <td>Hartslagmeter</td>
      <td>Ja</td>
    </tr>
    <tr>
      <td>Gyroscoop</td>
      <td>Ja</td>
    </tr>
    <tr>
      <td>GPS</td>
      <td>Ja</td>
    </tr>
    <tr class="cat" colspan="2">
      <th colspan="2">Batterij</th>
    </tr>
    <tr>
      <td>Capaciteit</td>
      <td>361 mAh</td>
    </tr>
    <tr>
      <td>Vervangbaar</td>
      <td>Nee</td>
    </tr>
    <tr class="cat" colspan="2">
      <th colspan="2">Verbindingen</th>
    </tr>
    <tr>
      <td>WiFi</td>
      <td>Ja</td>
    </tr>
    <tr>
      <td>Mobiel Netwerk</td>
      <td>Nee</td>
    </tr>
    <tr>
      <td>Bluetooth</td>
      <td>Bluetooth 5.0</td>
    </tr>
    <tr>
      <td>NFC</td>
      <td>Ja</td>
    </tr>
</table>

Answer 2

使用 justify items center 我认为它可以解决这个问题

我怎样才能把我所有的里都放在中间，这样它们才能正确对齐

How can I set all my li in the middle so they allign properly

html

css