У овом водичу ћемо видети како центрирати слике помоћу ХТМЛ -а и ЦСС -а. Није нимало компликовано и често ће нам требати за наше веб странице. Видећемо неке опције, једну да користимо само ХТМЛ, другу кроз употребу ЦСС -а и на крају користећи Боотстрап.
ХТМЛ и ЦСС су два водећа језика за скриптовање веба у свету за креирање веб страница и апликација. Оба језика заједно раде на овом задатку. Док ХТМЛ даје структуру веб страницама, ЦСС се брине о стилу и визуелном или слушном делу. ХТМЛ нуди ознаке које обухватају различите елементе странице и на овај начин, заједно са атрибутима, креираћемо костур наше веб странице.
Разлике између ХТМЛ -а и ЦСС -аУкратко, можемо видети разлике између ХТМЛ -а и ЦСС -а на следећи начин:
- ХТМЛ је лакше научити и имплементирати
- ХТМЛ Доступан на више језика
- ХТМЛ је лаган и ефикасан
- ХТМЛ има ограничену сигурност
- ХТМЛ је донекле спор.
- ЦСС има већу библиотеку атрибута и стилова од ЦСС -а
- ЦСС побољшава време учитавања странице.
- ЦСС има одличну компатибилност и лако одржавање.
- ЦСС има проблема са перформансама
- ЦСС нема уграђену сигурност
Данас се препоручује да кораке изведете директно помоћу ЦСС -а, али ако се више бавите ХТМЛ -ом, можете имати и следеће опције.
1. Како центрирати слику на веб страници користећи само ХТМЛ
Иако ћемо овим опцијама центрирати слику помоћу ХТМЛ -а, видећемо два начина да то лако учинимо.
Централна слика са ХТМЛ -ом и средишњом ознакомУ овој једноставној опцији довољно је омотати слику централним ознакама
- Део „срц“ се користи за означавање адресе путање слике.
- Алт део даје веб страници информације о имену слике.
Осим тога, морамо доделити висину и ширину слике овако:
висина = ”250” ”
Централна слика са ХТМЛ -ом и срединомАли што се тиче слика, овај концепт центра који смо видели се разликује и боље је користити средње поравнање, па код остаје следећи:
Ако додамо и текст, имали бисмо овај код:
Овај пример ће бити центрирање слике са текстом у ХТМЛ -у.
Поравнајте слику са ХТМЛ -ом помоћу атрибута алигнАко желимо хоризонтално поравнати слику, можемо то учинити на сличан начин као што радимо са текстом, то јест, користити атрибут алигн унутар ознака
или. Креираћемо код где се атрибут појављује са ознаком слике. Ознака је једна од оних која прихвата атрибут алигн, али је употреба другачија.
Али како ми кажемо, етикета
Овде бисмо ставили текст који би испунио цео десни део и преломили слику коју смо поставили. Настављамо са попуњавањем текстуално решавање проблема
Урадићемо исто за поравнавање текста и слике десно на лево, али замену „лево“ са „десно“.
Не препоручује се јер аспекте постављања и стила треба препустити ЦСС -у и не користити директно у ХТМЛ -у. На овај начин ћемо имати код који је лакше одржавати и мењати, али ако вам у било ком тренутку затреба за мали и брзи тест, вреди га знати.
2. Како центрирати слику на веб страници помоћу ЦСС -а
Овде ћемо имати ХТМЛ код и ЦСС код. Почињемо гледајући ХТМЛ.
Ставили смо класу на слику, која се зове центрирана, и то ће нам помоћи да је касније стилизујемо у ЦСС -у. Испод је код за центрирање слике.
.центер {маргина: 10пк ауто; дисплеј блок; } Такође можемо користити следећи код за поравнавање слике помоћу ЦСС -а за нашу веб страницу:
.центер {маргин-лефт: ауто; маргин-ригхт: ауто; }Ако вам ово не помаже у прегледачу јер се користи метода центрирања текста, морамо прегледачу указати да је слика елемент на нивоу блока. На овај начин можемо да га центрирамо као да је то још један блок. Користићемо овај код:
Учинимо да се елемент прикаже као блок и дамо му аутоматску маргину (довољно је да је маргина аутоматска са стране, горе и доле можете ставити шта год желите). Имајте на уму да ако слика заузима целу ширину, неће бити центрирана.
имг.центер {дисплаи: блоцк; маргин-лефт: ауто; маргин-ригхт: ауто; }
3. Како центрирати слику на веб страници помоћу Боотстрапа
Са овим популарним оквиром све је једноставније, само морамо ставити класу централног блока у слику.
Мораћете да преузмете Боотстрап и повежете га или ставите свој ЦДН у наш ХТМЛ, за ово остављам вашу везу испод:
Резултат примене ових кодова можемо видети са сликом испод:
На овај начин можемо центрирати наше слике у ХТМЛ -у и помоћу ЦСС -а и тако учинити естетски успешније веб радове.
