В този урок ще видим как да центрираме изображенията с HTML и CSS. Това изобщо не е сложно и ще се нуждаем често от нашите уеб страници. Ще видим някои опции, едната, че използваме само HTML, друга чрез използването на CSS и накрая с помощта на Bootstrap.
HTML и CSS са два водещи езика за уеб скриптове в света за създаване на уеб страници и приложения. И двата езика работят заедно по тази задача. Докато HTML придава структура на уеб страниците, CSS се грижи за стила и визуалната или слуховата част. HTML предоставя тагове, които обгръщат различните елементи на страница и по този начин, заедно с атрибути, ще създадем скелета на нашия уебсайт.
Разлики между HTML и CSSЗа да обобщим, можем да видим разликите между HTML и CSS, както следва:
- HTML е по -лесен за изучаване и внедряване
- HTML Наличен на няколко езика
- HTML е лек и ефективен
- HTML има ограничена защита
- HTML е малко бавен.
- CSS има по -голяма библиотека от атрибути и стилове от CSS
- CSS подобрява времето за зареждане на страницата.
- CSS има страхотна съвместимост и лесна поддръжка.
- CSS дава някои проблеми с производителността
- CSS няма вградена защита
Днес се препоръчва да изпълните стъпките директно с CSS, но ако сте повече от HTML, можете да имате и следните опции.
1. Как да центрирате изображението върху уеб страница, използвайки само HTML
Въпреки че тези опции за центриране на изображението с HTML ще видим два начина да го направите лесно.
Централно изображение с HTML и централен маркерВ тази проста опция е достатъчно да увиете изображението с централните етикети
- Частта „src“ се използва за обозначаване на адреса на пътя на изображението.
- Alt частта дава информация на уеб страницата за името на изображението.
Освен това трябва да зададем височина и ширина на изображението по следния начин:
височина = ”250” ”
Централно изображение с HTML и средатаНо по отношение на изображенията, тази концепция за център, която видяхме, се различава и е по -добре да се използва средно подравняване, така че кодът остава както следва:
Ако добавим и текст, ще имаме този код:
Този пример ще бъде центриране на изображение с текст в HTML.
Подравнете изображението към HTML с атрибут alignАко искаме да подравним изображение хоризонтално, можем да го направим по подобен начин на това, което правим с текст, тоест използваме атрибута align в етикетите
или. Ще създадем кода, където атрибутът се появява с маркера на изображението. Етикетът е един от тези, които приемат атрибута align, но използването е различно.
Но както казваме, етикетът
Тук бихме поставили текста, който да запълни цялата дясна част и да увием изображението, което сме поставили. Продължаваме да попълваме текстовата решаваща решаваща
Ще направим същото, за да подравним текста и изображението вдясно вляво, но замествайки „ляво“ с „дясно“.
Не се препоръчва, тъй като аспектите на разположение и стил трябва да бъдат оставени на CSS и да не се използват директно в HTML. По този начин ще имаме код, който е по -лесен за поддръжка и промяна, но ако по всяко време имате нужда от него за малък и бърз тест, струва си да го знаете.
2. Как да центрирате изображение на уеб страница с CSS
Тук ще имаме HTML код и CSS код. Започваме с разглеждане на HTML.
Поставихме клас на изображението, наречен центриран, и това ще ни помогне да го стилизираме по -късно в CSS. По -долу е кодът за центриране на изображението.
.center {margin: 10px auto; дисплей: блок; } Можем също да използваме следния код за подравняване на изображение с помощта на CSS за нашата уеб страница:
.center {margin-left: auto; margin-right: auto; }Ако това не работи за вас в браузър, тъй като се използва методът за центриране на текст, трябва да посочим на браузъра, че изображението е елемент на ниво блок. По този начин можем да го центрираме, сякаш е друг блок. Ще използваме този код:
Ние правим елемента да изглежда като блок и му даваме автоматично поле (достатъчно е полето да е автоматично отстрани, отгоре и отдолу можете да поставите каквото искате). Имайте предвид, че ако изображението заема цялата ширина, то няма да бъде центрирано.
img.center {дисплей: блок; margin-left: auto; margin-right: auto; }
3. Как да центрирате изображение на уеб страница с помощта на Bootstrap
С тази популярна рамка всичко е по-просто, просто трябва да поставим централния блок в изображението.
Ще трябва да изтеглите Bootstrap и да го свържете или да поставите своя CDN в нашия HTML, за това оставям вашата връзка по -долу:
Можем да видим резултата от прилагането на тези кодове с изображение по -долу:
По този начин можем както да центрираме нашите изображения в HTML, така и с помощта на CSS и по този начин да направим естетически по -успешни уеб работи.
