Как да позиционирате уеб елементи с CSS вертикално подравняване

Търсене в Google









Пейзаж
Описание






гора

Lorem ipsum dolor sit amet.






океан

Lorem ipsum dolor sit amet.

В HTML код по-горе създава проста уеб страница, която показва четири елемента: свързан текст, изображение, вградено видео и таблица. Трябва да изглежда така във вашия браузър:

Как да подравните вертикално текст

По подразбиране повечето текстови елементи (като заглавия,

, и

Въпреки това, някои текстови елементи, като например и маркерът е вграден. В резултат на това те поддържат свойството вертикално подравняване. За да подравните текста вертикално, просто задайте подходящата стойност на свойството вертикално подравняване на CSS.

Използване на горната стойност за вертикално подравняване върху текст

a {
 вертикално подравняване: отгоре;
}

Добавяне на CSS код по-горе към основния HTML документ ще подравни горната част на маркирайте текст с горната част на най-високия елемент в реда. Произвеждане на следния актуализиран дисплей:

Използване на процентната стойност върху текста

a {
 вертикално подравняване: -50%;
}

CSS по-горе подравнява текстовия елемент на позиция, която е 50% под базовата линия на родителския елемент. Той произвежда следния изход във вашия браузър:

Както можете да видите на изображението по-горе, текстовият елемент заема позиция под изображението и видео елементите, които са на един и същи ред. За да позиционирате този елемент на или над базовата линия, използвайте положителна процентна стойност.

Използване на стойността на дължината в текста

a {
 вертикално подравняване: 90px;
}

Кодът по-горе подравнява основната линия на текстовия елемент на дължина от 90px над основната линия на родителския елемент. Това произвежда следния изход в браузър:

Как да подравните вертикално изображения

В tag е вграден елемент, с който свойството вертикално подравняване на CSS работи добре.

Използване на супер стойността за вертикално подравняване върху изображения

img {
 вертикално подравняване: супер;
}

Кодът по-горе позиционира изображението в горния индекс на основната линия на родителския елемент. Това означава на позиция над базовата линия, както можете да видите в следния изход:

Използване на процентната стойност за вертикално подравняване върху изображения

img {
 вертикално подравняване: 25%;
}

Кодът по-горе подравнява основната линия на елемента на изображението на 25% над базовата линия на родителския елемент. Това създава следния огледален ефект на супер стойността:

Използване на стойността на дължината за вертикално подравняване върху изображения

img {
 вертикално подравняване: 5px;
}

Кодът по-горе подравнява основната линия на елемента на изображението на позиция 5px над базовата линия на родителския елемент. Това създава ефект, подобен на този при стойностите на супер и 25%:

Вградените медии като видеоклипове и вградени рамки са вградени HTML елементи. Следователно свойството на CSS vertical-align работи чудесно с тях.

Използване на супер стойността за вертикално подравняване на видеоклип

видео {
 вертикално подравняване: под;
}

Кодът по-горе позиционира видеото в базовата линия на индекса на родителския елемент. Това означава на позиция под базовата линия, както можете да видите в следния изход:

Използване на процентната стойност на вертикално подравняване на видеоклип

видео {
 вертикално подравняване: -25%;
}

Кодът по-горе подравнява основната линия на видеоелемента на 25% под базовата линия на родителския елемент. Това създава следния огледален ефект на подстойността:

Използване на стойността на дължината за вертикално подравняване на видеоклип

видео {
 вертикално подравняване: -5px;
}

Кодът по-горе подравнява основната линия на елемента на изображението на позиция 5px под основната линия на родителския елемент. Това създава ефект като стойностите на sub и -25%:

Как да подравните вертикално елементи в таблица

Използването на свойството vertical-align с таблица е малко сложно, тъй като таблицата е блоков елемент. както и да е

Използване на горната стойност с вертикално подравняване върху данните от таблицата

td {
 височина: 40px;
 вертикално подравняване: отгоре;
}

Кодът по-горе добавя височина от 40px към всяка клетка в таблицата. След това подравнява данните във всяка клетка с горната част на всеки ред. Това произвежда следния изход в браузъра:

Използване на средната стойност с вертикално подравняване върху данни от таблица

td {
 височина: 40px;
 вертикално подравняване: средно;
}

Средната стойност за вертикално подравняване в кода по-горе вертикално центрира данните във всяка клетка. Той произвежда следния изход в браузъра:

Използване на долната стойност с вертикално подравняване върху данните в таблицата

td {
 височина: 40px;
 вертикално подравняване: отдолу;
}

Кодът по-горе подравнява данните във всяка клетка в долната част на всеки ред. Той произвежда следния изход в браузъра:

Сега можете да подравните елементите на вашата уеб страница

Вече можете да използвате свойството вертикално подравняване на CSS с множество различни вградени елементи, включително текст, вградени медии и таблични данни. Общото правило е, че свойството vertical-align работи само върху вградени и inline-block елементи.

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

За автора

Кадейша Кийн (публикувани 52 статии)

Kadeisha Kean е разработчик на софтуер с пълен стек и писател по технически/технологии. Тя има отчетливата способност да опростява някои от най-сложните технологични концепции; производство на материал, който може лесно да бъде разбран от всеки начинаещ в технологиите. Тя е страстна да пише, разработва интересен софтуер и да пътува по света (чрез документални филми).

Още от Kadeisha Kean