Как да центрирате вертикално div елемент за всички браузъри, използващи CSS

При уеб разработката е от решаващо значение да създадете правилно оформлението на елемента. Въпреки това много свойства на CSS, като CSS3 Flexible Box, са полезни за коригиране на оформлението на уеб страници и HTML елементи. Гъвкава кутия се използва за подреждане на уеб страници и приложения по рекурсивен начин. Този режим Flexbox помага за създаване на оформления за сложни уеб страници и приложения.

Тази публикация ще ви напътства как да центрирате елемент div за всички браузъри, използващи CSS вертикално.

Как да подравните div елемент с помощта на CSS?

Елементът div може да бъде вертикално подравнен чрез използване на свойството display “ flex ' заедно с CSS ' подравняване на елементи „имот и“ justify-content ' Имот. Свойството “align-items” подравнява елемента вертикално, а свойството “justify-content” подравнява съдържанието хоризонтално.

Пример: Как да центрирате вертикално div елемент с CSS?

В HTML първо добавете „

' елемент и му присвоете класа ' главно съдържание ”. Между таговете „

“ добавете „ ” със следните атрибути:

---

---

• “ src ” се използва за указване на URL адреса на изображението.
• “ всичко ” дефинира някакъв текст, който ще се покаже на мястото на изображение, ако то не успее да се зареди.
• “ ширина ” се използва за регулиране на ширината на изображението.
• След това добавете „

  ”, за да вградите абзаца в страницата.

Ето HTML кода:

< див клас = 'главно съдържание' >
< img src = '/images/laptop-notepad.jpg' всичко = 'Лаптоп с бележник и химикал' ширина = '300' >
< стр > Лаптопът също е преносим компютър като преносим компютър. стр >
див >

В CSS ще посочим няколко свойства за стил на div.

Стил „основно съдържание” Клас

.главно съдържание {
височина: петдесет % ;
Цвят на фона: #46C2CB;
размер на шрифта: 24px;
подложка: 10px;
}

Следните CSS свойства са дефинирани в „ главно съдържание ” клас:

• “ височина ” се използва за регулиране на височината на контейнера
  .
• “ Цвят на фона ” определя цвета на фона на елемента.
• “ размер на шрифта ” определя размера на шрифта на елемента.
• “ подплата ” свойство задава пространство около съдържанието на елемента.

От изхода можете да забележите, че съдържанието на елемента div не е в центъра:

Нека продължим напред, за да приложим свойствата на CSS, които помагат за центрирането на „

” елемент вертикално. Добавете тези свойства към класа ' главно съдържание ”, които се използват за достъп до елемента

:

дисплей: flex ;
подравняване на елементи: център;

Ето описанието:

• “ дисплей ' Имот ' flex ” се използва, за да направи оформлението на div гъвкаво към неговия елемент.
• “ подравняване на елементи ' CSS свойството е зададено като ' център ”, който ще подравни вертикално div елементите.

Изход

Научихте как да центрирате div елемент вертикално за всички браузъри, използващи CSS.

Заключение

За да центрирате вертикално div елемент, CSS „ дисплей ” свойство се използва с „ flex ” стойност. Тази стойност прави

контейнера гъвкав към своите елементи. За да подравните вертикално елемента div, коригирайте „ подравняване на елементи ” свойство и му присвоете „ център ” стойност. Този блог ви показа как да използвате CSS за вертикално центриране на div елементи във всички браузъри.