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

I want to give a spec table for the Watch 4. For now, I have this code.

<div >
      <ul >
        <li>Lengte</li>
        <li>44 mm</li>
      </ul>
    </div>
    <div >
      <ul >
        <li>Breedte</li>
        <li>43.3 mm</li>
      </ul>
    </div>

with this CSS code

.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;
}

Here is the full project https://jsfiddle.net/2wvfyg16/ You might have to make the CSS tab bigger.

All the way at the bottom at the tab "Verbindingen". It is all miss alligned.

CodePudding user response：

As the data appears to be tabular, this snippet is a simple start on setting out the two columns with spacing in an HTML table.

Obviously you'll want to change things to give the exact layout your want but it does demonstrate that an HTML table can give the sort of formatting required.

#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 >
    <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  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  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  colspan="2">
      <th colspan="2">Software</th>
    </tr>
    <tr>
      <td>Besturingssysteem</td>
      <td>One UI Watch</td>
    </tr>
    <tr  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  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  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>

CodePudding user response：

use justify items center i think it would work for that problem