Как да центрирате изображение с помощта на HTML програмиране

...

Използвайте CSS, за да посочите външния вид на уеб страницата.

Кодерът на уеб страница използва език за маркиране на хипертекст, за да каже на уеб браузъра функционалното предназначение на всеки елемент на страница, като параграф, заглавие или списък. След HTML 4, каскадните стилови таблици предоставят на кодера начин да каже на браузъра как трябва да изглежда всеки от тези елементи, отделно от дефинирането на това какво представляват. Страницата може да има различни CSS стилове за различни типове устройства, като мобилни телефони и настолни компютри, което позволява на външния вид на страницата да се променя, без кодиращият да трябва да променя HTML. Използвайте CSS свойства, за да центрирате изображение.

Етап 1

Поставете маркера "img" в HTML файла, където искате вашето изображение да се показва на уеб страницата. Трябва да е между етикетите "body" и след етикетите "h1". Например,

Видео на деня

Това е вашият текст.

Описание на снимката

дефинира изображение с име photo.jpg, което е 170 пиксела широко и 50 пиксела високо. Това е първото нещо на страницата след горното заглавие.

Стъпка 2

Използвайте CSS атрибута "margin", за да дефинирате пространството около елементите на страницата, като например снимки. Стойността "auto" за атрибута margin казва на уеб браузъра да определи автоматично количеството пространство. Така, Описание на снимката дефинира, че пространството около изображението се определя от браузъра.

Стъпка 3

Използвайте свойството "display", за да дефинирате как да се показва елемент на страницата. Стойността "блок" за свойството display казва на уеб браузъра да покаже елемента на собствен ред, с пространство над и под него. Така, Описание на снимката дефинира същото изображение, но добавянето на "display: block;" сега го поставя на собствена линия.

Стъпка 4

Прегледайте уеб страницата в няколко различни браузъра, за да проверите дали изображението е центрирано правилно.

Бакшиш

Включете описанието на изображението в етикет "alt". Това прави страницата ви по-достъпна за читатели с увредено зрение и гарантира, че кодът ви е съвместим със стандартите. Описание на снимката