Како позиционирати веб елементе помоћу ЦСС вертикалног поравнања

Гоогле претрага









Сценери
Опис






Форест

Лорем ипсум долор сит амет.






Оцеан

Лорем ипсум долор сит амет.

Тхе ХТМЛ код изнад креира једноставну веб страницу која приказује четири елемента: повезани текст, слику, уграђени видео и табелу. У вашем претраживачу би требало да изгледа овако:

Како вертикално поравнати текст

Подразумевано, већина текстуалних елемената (као што су наслови,

, и

Међутим, неки текстуални елементи као што су и таг су инлине. Као резултат тога, они подржавају својство вертикалног поравнања. Да бисте вертикално поравнали текст, једноставно доделите одговарајућу вредност својству ЦСС вертицал-алигн.

Коришћење вертикалног поравнања на врху Вредност на тексту

а {
 вертикално поравнање: врх;
}

Додавање ЦСС код изнад основног ХТМЛ документа ће поравнати врх означите текст са врхом највишег елемента у реду. Израда следећег ажурираног екрана:

Коришћење процентуалне вредности на тексту

а {
 вертикално поравнање: -50%;
}

ЦСС изнад поравнава елемент текста на позицији која је 50% испод основне линије родитељског елемента. Он производи следећи излаз у вашем претраживачу:

Као што видите на горњој слици, елемент текста заузима позицију испод елемента слике и видеа, који се налазе на истој линији. Да бисте позиционирали овај елемент на или изнад основне линије, користите позитивну процентуалну вредност.

Коришћење вредности дужине у тексту

а {
 вертикално поравнање: 90пк;
}

Код изнад поравна основну линију елемента текста на дужини од 90 пиксела изнад основне линије родитељског елемента. Ово производи следећи излаз у претраживачу:

Како вертикално поравнати слике

Тхе таг је уграђени елемент, са којим ЦСС својство вертицал-алигн добро функционише.

Коришћење супер вредности вертикалног поравнања на сликама

имг {
 вертикално поравнање: супер;
}

Код изнад поставља слику на основну линију надредаја надређеног елемента. То значи на позицији изнад основне линије, као што можете видети у следећем излазу:

Коришћење процентуалне вредности вертикалног поравнања на сликама

имг {
 вертикално поравнање: 25%;
}

Код изнад поравна основну линију елемента слике на 25% изнад основне линије родитељског елемента. Ово производи следећи ефекат огледала супер вредности:

Коришћење вредности дужине вертикалног поравнања на сликама

имг {
 вертикално поравнање: 5пк;
}

Код изнад поравна основну линију елемента слике на позицији 5 пиксела изнад основне линије родитељског елемента. Ово производи ефекат сличан оном код супер и 25% вредности:

Уграђени медији као што су видео снимци и оквири су уграђени ХТМЛ елементи. Стога, ЦСС својство вертикалног поравнања одлично функционише са њима.

Коришћење супер вредности вертикалног поравнања на видео снимку

видео {
 вертицал-алигн: суб;
}

Код изнад поставља видео на основну линију индекса надређеног елемента. То значи на позицији испод основне линије, као што можете видети у следећем излазу:

Коришћење процентуалне вредности вертикалног поравнања на видео снимку

видео {
 вертикално поравнање: -25%;
}

Код изнад поравна основну линију видео елемента на 25% испод основне линије родитељског елемента. Ово производи следећи ефекат огледала под вредности:

Коришћење вредности дужине вертикалног поравнања на видео снимку

видео {
 вертицал-алигн: -5пк;
}

Код изнад поравна основну линију елемента слике на позицији 5 пиксела испод основне линије родитељског елемента. Ово производи ефекат попут вредности суб и -25%:

Како вертикално поравнати ставке у табели

Коришћење својства вертикалног поравнања са табелом је мало незгодно, пошто је табела блок елемент. Међутим

Коришћење вредности вертикалног поравнања на врху на подацима табеле

тд {
 висина: 40пк;
 вертикално поравнање: врх;
}

Горњи код додаје висину од 40 пиксела свакој ћелији у табели. Затим поравнава податке у свакој ћелији са врхом сваког реда. Ово производи следећи излаз у претраживачу:

Коришћење средње вредности вертикалног поравнања на подацима табеле

тд {
 висина: 40пк;
 вертикално поравнање: средина;
}

Средња вредност вертикалног поравнања у коду изнад вертикално центрира податке унутар сваке ћелије. Он производи следећи излаз у претраживачу:

Коришћење доње вредности вертикалног поравнања на подацима табеле

тд {
 висина: 40пк;
 вертикално поравнање: дно;
}

Горњи код поравнава податке у свакој ћелији са дном сваког реда. Он производи следећи излаз у претраживачу:

Сада можете да поравнате елементе на својој веб страници

Сада можете да користите ЦСС својство вертикалног поравнања са мноштвом различитих уграђених елемената, укључујући текст, уграђене медије и табеларне податке. Опште правило је да својство вертицал-алигн ради само на инлине и инлине-блоцк елементима.

Међутим, ово својство можете да користите на блок елементима, само их морате прво конвертовати у инлине или инлине-блок елементе. Запамтите да можете комбиновати вертикално поравнање са другим својствима поравнања, као што је поравнање текста.

О аутору

Кадеисха Кеан (52 објављена чланка)

Кадеисха Кеан је програмер комплетног софтвера и писац технике/технологије. Она има изразиту способност да поједностави неке од најсложенијих технолошких концепата; производећи материјал који може лако да разуме сваки почетник у технологији. Она је страствена у писању, развоју занимљивог софтвера и путовању светом (кроз документарне филмове).

Више од Кадеисхе Кеан