Hoe een horizontale lijst in een Div in een CSS te centreren

Schrijver: Laura McKinney
Datum Van Creatie: 2 April 2021
Updatedatum: 21 November 2024
Anonim
How to Center in CSS - EASY ( Center Div and Text Vertically and Horizontally )
Video: How to Center in CSS - EASY ( Center Div and Text Vertically and Horizontally )

Inhoud

Bij het maken van een webpagina kan het handig zijn om CSS te gebruiken om een ​​horizontale lijst te centreren, zoals een klikbaar menu. U kunt CSS, dat is een stijlbladtaal, naast HTML gebruiken om het uiterlijk van uw pagina te bepalen. CSS-stijlen worden vaak onvoorspelbaar weergegeven in verschillende webbrowsers, dus het is belangrijk om uw pagina grondig te testen voordat u deze publiceert. Een ongeordende lijst (ul) is een element op blokniveau, dus u kunt de eigenschap width gebruiken om een ​​gecentraliseerd effect te maken.


routebeschrijving

U kunt CSS en HTML gebruiken om het uiterlijk van uw webpagina te bepalen (Comstock / Stockbyte / Getty Images)

  1. Open uw HTML-bestand in een teksteditor, zoals Windows Kladblok.

  2. Voeg de vereiste CSS-stijlen toe aan de horizontale lijst in de sectie "" van uw HTML-bestand door de volgende code toe te voegen:

    type = "text / css"> .myclass {text-align: center; } .myclass ul {width: 275px; marge: 0px auto} .myclass li {display: block; zweven: links; hoogte: 50px; regelhoogte: 50px; marge: 5px; breedte: 125 px; rand: vast 1px zwart; }

    De breedte van de lijst (ul) vertegenwoordigt de som van de breedte en de marges van de horizontale items (li).

  3. Maak een horizontale lijst in het gedeelte ">" van het HTML-bestand door de volgende code toe te voegen:


    • eerste item
    • tweede item in div

    De "ul" -tag geeft een ongeordende lijst aan. De "li" -tag komt overeen met een item in de lijst. Lijstitems gebruiken CSS-stijlen die overeenkomen met de hierboven gedefinieerde CSS-stijlen.

  4. Sla het HTML-bestand op en laad het op uw webserver om de horizontale, gecentreerde lijst te bekijken.