Easywd.lv Kā izveidot mājas lapu

CSS align (izlīdzināšana)

Lietotāju novērtējums:  / 2
SliktākaisLabākais 


Center Align - Izmantojot atstarpes (margins)

 

Platums  bloka līmeņa elementam, ja noteikts, neļaus tam izstiepties ārpus saturoša konteinera. Izmantojiet margin: auto, , lai horizontāli centrēt elementu saturošajā konteinerā.

Elements tad aizņem norādīto platumu, un pārējās telpas tiks sadalītas vienādi starp abām starpībām, tas nozīmē

ja konteineris ir 500px, un iekšā ir objekts ar platumu 200px, ja izmantojam margin:auto tad būs sekojoši (150px tukšums,

tad 200px objekts ar definēto platumu un atkal 150px tukšums):

Piemērs

.center {
    margin: auto;
    width: 60%;
    border:3px solid #8AC007;
    padding: 10px;
}

Izmēģiniet to pats »

Padoms:Izlīdzināšana pa centru  nav spēkā, ja platuma īpašība (width) nav noteikta (vai ir 100%).

Padoms: Lai pielāgotu tekstu, skatietatbilstošo rakstu css teorijasadaļā.


Left un Right Align (izlīdzināšana) - Izmantojot parametru position

Viena no metodēm, saskaņojot elementi ir izmantot position: absolute; 

vispār neiesaku izmantot šo metodi, jo mainoties ekrāna izšķirstspējai, var būt nevēlami rezultāti, ka viens elements ir pāri otram!!!

bet ka teorijai der zināt (šai situācijā, mes nosakām ka elements atrodās (0px no labās puses), vai arī var teikt(izlīdzināts pa labi).

Piemērs

.right {
    position: absolute;
    right: 0px;
    width: 300px;
    border:3px solid #8AC007;
    padding: 10px;
}

Izmēģiniet to pats »

Piezīme: Absolūti novietoti elementi tiek izņemti no normālas plūsmas, un var pārklāt citus elementus.

Padoms: Kad saskaņojiet(centrējiet) elementus ar position, vienmēr definējietmarginunpaddingpar <body> elementam. Tas nepieciešams, lai izvairītos no vizuālās atšķirības dažādās pārlūkprogrammās.

Pastāv arī problēma ar IE8 un agrākām versijām, kad izmantojatposition. Ja konteiners elements (mūsu gadījumā <div class = ".container">) ir ar norādīto platumu, un !DOCTYPE deklarācija trūkst, IE8 un iepriekšējās versijas pievieno 17px rezervi labajā pusē. Tie, šķiet, ir atvēlēti ritjoslai. Tātad, vienmēr uzstādiet !DOCTYPE deklarāciju, lietojot!position,

mans ieteikums vispār, nekad neaizmirst jebkuram HTML dokumentam pievienot, deklarācijas kurām jābūt standartā !DOCTYPE, nav izņēmums!!!

Piemērs

body {
    margin: 0;
    padding: 0;
}

.container {
    position: relative;
    width: 100%;
}

.right {
    position: absolute;
    right: 0px;
    width: 300px;
    background-color: #b0e0e6;
}

Izmēģiniet to pats »

Left un Right Align- Izmantojot float

Vēl viena metode, lai saskaņot elementus ir metode izmantot float īpašību, ko starp citu es arī būtu ieteicis,

jo šodienas HTML maketēšana un CSS stailingā ir pieņemta prakse izveidot lapas struktūru izmantojot float un clear parametrus .:

Piemērs

.right {
    float: right;
    width: 300px;
    border:3px solid #8AC007;
    padding: 10px;
}

Izmēģiniet to pats »

Padoms: Kad saskaņojiet elementus ar float, vienmēr definējietmarginunpadding <body> elementam. Tas nepieciešams, lai izvairīties no vizuālās atšķirības dažādās pārlūkprogrammās.

Pastāv arī problēma ar IE8 un agrākām versijām, kad izmantojatposition. Ja konteiners elements (mūsu gadījumā <div class = ".container">) ir ar norādīto platumu, un !DOCTYPE deklarācija trūkst, IE8 un iepriekšējās versijas pievieno 17px rezervi labajā pusē. Tie, šķiet, ir atvēlēti ritjoslai. Tātad, vienmēr uzstādiet !DOCTYPE deklarāciju, lietojot!position, :

Piemērs

body {
    margin: 0;
    padding: 0;
}

.right {
    float: right;
    width: 300px;
    background-color: #b0e0e6;
}

Izmēģiniet to pats »

Pārbaudiet sevi ar piemēriem!

Exercise 1 »  Exercise 2 »