Kako poravnati DIV vodoravno v CSS

Avtor: Janice Evans
Datum Ustvarjanja: 25 Julij. 2021
Datum Posodobitve: 1 Julij. 2024
Anonim
Align Text Vertically | HTML And CSS
Video.: Align Text Vertically | HTML And CSS

Vsebina

Oznake HTML "div" določajo postavitev spletnih strani. Cascading style sheets se uporabljajo za oblikovanje HTML oznak znotraj strani. Lastnosti "id" in "class" se uporabljajo v CSS za uporabo določenih stilov. Ti slogi, ki so skupni večkratnim oznakam "div", je mogoče definirati v "razredu", vendar morajo biti unikatni slogi definirani z lastnostjo "id" določene oznake "div", saj je ta lastnost mogoče uporabiti samo enkrat. Sosednji element div se prikaže pod prejšnjim elementom "div", razen če uporabite vodoravno poravnalni slog.


Navodila

Oznake HTML "div" odpravljajo potrebo po uporabi tabel za postavitev strani (Comstock / Comstock / Getty Images)

    Določite absolutne položaje oznak div

  1. Odprite stran HTML in povezano datoteko CSS v dveh različnih oknih iz urejevalnika HTML ali osnovnega besedila, kot je beležnica.

  2. Poiščite vse oznake div, ki bodo poravnane, in ustvarite edinstven razred »halign«:

    Prvi div

    Drugi div tretji div

    Če je »halign« že uporabljen kot ime razreda drugje v HTML-ju, uporabite drugo in se prepričajte, da je edinstven.

  3. Vnesite imena "id" za vse elemente "div", ki jih morate poravnati. Vključite številke v imena, da določite vrstni red umestitve. Na primer, uporabite imena "box1", "box2" in tako naprej:


    Prvi div

    Drugi div tretji div

    Upoštevajte že uporabljena imena "id".

  4. Odprite datoteko CSS in vnesite naslednje:

    .align {položaj: absolutno; na vrh: XXX; }

    "XXX" zamenjajte z mejno vrednostjo med absolutnim vrhom in vodoravno črto poravnave. Uporabite vrednosti pikslov ali odstotke, odvisno od drugih elementov div, ki so postavljeni nad razred "halign".

  5. Uredite posamezne bloke sloga "div" v CSS. Poiščite imena "id" v kodi in dodajte kodno vrstico "left: YYY" znotraj vsakega bloka in nadomestite "YYY" z absolutnimi vrednostmi levega roba elementov. "Absolutna meja" je prostor med robom zaslona brskalnika in ustreznim razdelkom. Robovi bodo imeli večje vrednosti, da bodo divi postavljeni drug ob drugem:

    box1 {margin-left: 100px; }

    box2 {margin-left: 400px; }

    box3 {margin-left: 700px; }

    Plavite elemente DIV

  1. Odprite datoteko CSS v urejevalniku besedila.


  2. Določite edinstveno ime "razreda", kot je "halign", vnesite "float: left;" v kodni blok in shranite datoteko.

  3. Odprite HTML v novem oknu urejevalnika besedila in se prepričajte, da so vsi elementi, ki jih je treba poravnati, sosednji.

  4. Povežite ime razreda "halign" s sosednjimi elementi "div", ki jih morate poravnati.

  5. Postavite naslednjo kodo na vrh skupine elementov "div" v HTML:

Kako

  • Če so bila uporabljena katera koli imena razredov v kateremkoli od zadevnih divov, vnesite dodatna imena razredov in jih ločite z znakom razmika. Če je spletna stran širine tekočine, uporabite odstotke za vrednosti in presledke, tako da se velikost bloka in meje samodejno spremeni glede na velikost in ločljivost zaslona. Elementi oblikovanja na spletnih straneh s fiksno širino niso prilagodljivi velikosti zaslona ali ločljivosti, vrednosti pikslov pa so primerne za robove.

Obvestilo

  • Nekatere kode CSS ustvarjajo edinstveno vedenje v različnih brskalnikih. Preizkusite združljivost vseh kod CSS in HTML. Ne testiranje lahko zmanjša dostopnost in uporabnost spletne strani.

Kaj potrebujete

  • Urejevalnik besedila