Как да центрирате изображения с CSS

Искате ли да центрирате изображение с помощта на CSS? Проблемите с подравняването често са източник на разочарование за уеб дизайнерите. За щастие центрирането на изображение с CSS е наистина лесно и ние ще ви покажем как да направите това в няколко стъпки.

Както при много задачи за уеб дизайн, има повече от един начин да направите това! В тази статия ще разгледаме три основни метода. Да започваме!

1. Използвайте свойството на марж

Настройка на марж property е един от най-лесните начини за хоризонтално центриране на изображение с помощта на CSS. Маржовете са основен компонент на модела на CSS кутия.

Първо, ще трябва да трансформирате елемента на изображението от вграден в блоков. HTML елементите на ниво блок заемат цялата ширина на своя родителски елемент и са в състояние да заемат цялата ширина на страница.

Като направите елемент от изображението блоков елемент, можете след това да манипулирате неговата позиция, като коригирате хоризонталните му полета. Също така ще трябва да зададете конкретна ширина за изображението, за да определите колко място заема изображението на страницата.

Каквато и ширина да изберете, изображението ще трябва да има равни ляво и дясно поле. Можете да постигнете това лесно, като дадете на свойството марж стойност Автоматичен:

img.center {
 дисплей: блок;
 margin-left: автоматично;
 margin-right: auto;
 ширина: 800px;
}

2. Използвайте Flexbox Layout

Този метод изисква поставяне на изображението в елемент на ниво блок, обикновено a раздел:

След като направите това, можете да добавите някои свойства, за да манипулирате външния му вид. Ще използвате две CSS свойства.

Първият е на дисплей свойство със стойността му, зададена на огъване. Можете също използвайте flex за подравняване на елементи в HTML. Второто свойство, което ще добавите към вашия div е оправдавам-съдържание, като стойността му е зададена на център така:

div.center {
 дисплей: гъвкав;
 justify-content: център;
}

3. Използвайте остарял център елемент

Най-добрите уеб практики ви насърчават да използвате CSS за стилизиране и HTML за семантика, така че не трябва да използвате този HTML метод. В център tag, който центрира съдържанието си хоризонтално, е отхвърлен в HTML5.

Но ако трябва, ето как да центрирате изображение само с HTML. Просто увийте имг таг в централен етикет така:

Ето как да подравните вашите изображения в HTML

Показахме ви три различни, лесни за използване метода за центриране на вашите изображения в HTML документ. Опитайте всички и изберете този, който работи най-добре за вас. Избягвайте третия метод, освен ако нямате абсолютно никакъв избор!

Едно нещо, което трябва да имате предвид, е, че има още доста начини за центриране на изображения с помощта на HTML и CSS. Един често срещан метод, който работи както за текст, така и за вградени изображения, е подравняване на текста Имот.

Как да центрирате текста във вашата уеб страница с CSS

Прочетете Следващото

За автора