Kurssivinkki:

Kuinka keskittää lista

Opi, kuinka CSS keskittää listan.

  • keskitetty lista
  • Tee
  • Cola

keskitä HTML-lista

Vaihe 1 - Lisää HTML:

aseta <ul> elementit sisällytetään konttielelementtiin, esimerkiksi <div>:

<div class="container">
  <ul class="myUL">
    <li>Kahvi</li>
    <li>Tee</li>
    <li>Cola</li>
  </ul>
</div>

Vaihe 2 - Lisää CSS:

aseta <div> elementit keskitetään ja <ul> näyttömuodon muuttaminen inline-block。

tai, voit vasen tasapainottaa luettelo kohteita saadaksesi siistimmän näkymän:

div.container {
  tekstiasento: keskitetty;
{}
ul.myUL {
  näyttö: sisäinen;
  tekstiasento: vasen;
{}

Kokeile itse

Liittyvät sivut

Oppitunnit:CSS tasaus