Почему не работает vertical align: Почему не работает vertical-align в блоке? — Хабр Q&A – Все способы вертикального выравнивания в CSS / Netcracker corporate blog / Habr

Разбираемся с CSS свойством vertical-align

«Vertical-align не работает!», — закричит web-разработчик.

Vertical-align является одной из тех особенностей CSS, которая звучит довольно очевидно, но может вызвать проблемы у начинающих разработчиков. Я думаю, что даже многие ветераны CSS сталкиваются с проблемами с этим свойством время от времени.

В этой статья я попытаюсь рассказать все в наиболее понятной форме.

 

Что оно не делает?

Наиболее неправильное представление о vertical-align это то, что если оно применено к элементу, то все элементы внутри этого элемента изменят свое вертикальное положение. Пример, когда мы используем vertical-align: top на элемент, то содержимое элемента поднимется в самый верх данного элемента.

Это напоминает мне то, как мы это делали в дни, когда повсеместно использовалась табличная верстка:

<td valign="top">
    Whatever...
</td>

В данном табличном случае свойство valign (устаревшее) поднимет все содержимое в td-элементе наверх.

 

Поэтому, естественно, когда CSS разработчики начинают использовать вертикальное выравнивание, они предполагают, что оно будет работать так же — что содержание элементов выстроится в соответствии со значением свойства.

Но vertical-align так не работает!

 

Как на самом деле работает vertical-align?

Свойство vertical-align подчиняется трем правилам:

  1. Применяется только к inline или inline-block элементам
  2. Оно влияет на выравнивание самого элемента, а не его содержимого (исключение, когда свойство применяется к ячейкам таблицы)
  3. Когда применяется к ячейкам таблицы, значение влияет на содержимое, а не на саму ячейку.

Другими словами, следующий код не будет иметь никакого эффекта:

div {
	vertical-align: middle; /* ничего не делает */
}

Почему? Потому что <div> блочный элемент (block, а не inline). Конечно, вы можете конвертировать <div> в inline или inline-block элемент, тогда

vertical-align будет иметь эффект.

С другой стороны, при правильном использовании (на inline или inline-block блок элемента), вертикальное выравнивание выровняет целевой элемент по отношению к другим элементам.

Как высоко вверх или вниз элемент будет выравнен зависит от размеров встроенных элементов на той же линии.

 

Немного визуализации

Вот наглядная демонстрация вместе с пояснительным текстом, чтобы помочь вам понять, что происходит, когда вы используете вертикальное выравнивание встроенных элементов:

Как видно, 3 левых элемента наседают на нашу воображаемую линию, а правый элемент со свойством vertical-align: top прижимается к верхней воображаемой линии. Воображаемая линия варьируется в зависимости от размеров элементов.

 

Автор статьи: Alex. Категория: CSS
Дата публикации: 26.03.2013

CSS — разбираемся почему не работает vertical-align

vertical align css - CSS — разбираемся почему не работает vertical-align

Vertical-align — одно из самых сомнительных CSS свойств, которое, вроде-бы и работает, но по факту, из-за своих специфических требований — нет. Давайте разбираться, почему так происходит и что нужно, чтобы оно заработало

Многие все еще помнят те времена, когда в верстке повсеместно использовались таблицы, к ячейкам которых применялись:

<td valign="top">Some text...</td>

По умолчанию все элементы центрируются по центру вертикальной оси и такой трюк поднимает все элементы внутри ячейки вверх. В CSS свойство vertical-align работает частично так же, но подчиняется трем правилам:

  • Применяется только к inline или inline-block элементам;
  • Выравнивает лишь элемент, к которому применяется, а его содержимое не трогает;
  • В таблицах наоборот. влияет на содержимое, а ячейку не трогает;

Это значит, что код ниже абсолютно ничего не делает, т.к. первый пункт не выполнен — не задан тип блока.

div {
    vertical-align: middle; /* ничего не делает */
}

Ну а если нет возможности указать inline или inline-block блок, то на помощь всегда придут padding и margin. Пример ниже для не фиксированной высоты блока, где мы отступами отрегулируем оптимальную высоту и элементы останутся в центре и на этом конец.

.div{
    font:1rem;
    padding:5px 0; /* текст останется в центре */
}

Аналогично и с фиксированной высотой. Вручную ставим оптимальный отступ до тех пор, пока элементы не займут оптимальную позицию. Отличием от примера выше является то, что элементы не будут находиться по центру.

Почему не работает vertical align

«Опять vertical-align не работает!» — вздохнёт веб-разработчик.

CSS-свойство vertical-align — одно из тех, которые с виду очень просты, но могут вызвать вопросы у начинающих разработчиков. Я думаю, что даже у многих ветеранов CSS когда-то были проблемы с тем, чтобы его до конца понять.

В этой статье я постараюсь в понятной форме рассказать про это свойство.

Чего оно не делает

Распространенное заблуждение о vertical-align состоит в том, что применяясь к одному элементу, оно заставляет все элементы внутри него изменить свою вертикальную позицию. Например, когда элементу задан vertical-align:top , это подразумевает, что его содержимое поднимется к его же верхней границе.

Вспоминаются времена, когда мы делали раскладки на основе таблиц:

В данном примере с ячейкой таблицы использование свойства valign (в настоящее время исключенного из HTML5) приведёт к тому, что элементы внутри ячейки прижмутся к её верху. И естественно, когда верстальщики начинают использовать vertical-align , они думают, что получится то же самое, и содержимое элемента выровняется в соответствии со значением свойства.

Но vertical-align работает не так.

Чем оно является на самом деле

Использование свойства vertical-align может быть разбито на три простых для понимания правила:

  1. Оно применяется только к строчным элементам inline или строчным блокам inline-block .
  2. Оно влияет на выравнивание самого элемента, а не его содержимого (кроме случаев, когда применяется к ячейкам таблицы).
  3. Когда оно применяется к ячейке таблицы, выравнивание влияет на содержимое ячейки, а не на неё саму.

Иными словами, следующий код не даст никакого эффекта:

Почему? Потому что

С другой стороны, при правильном применении (к строчному элементу или строчному блоку), свойство vertical-align заставит текущий элемент выровняться относительно других строчных элементов.

Выше или ниже расположится элемент, будет зависеть от высоты строчных элементов на этой же строке или от свойства line-height , заданного для неё.

Несколько картинок

Вот картинка с пояснительным текстом, которая поможет вам понять, что происходит при вертикальном выравнивании строчных элементов:

А вот пример, в котором есть несколько строчных элементов, один из которых прижат к верху.

Ключевые слова

Несколько ключевых слов, которые можно задавать в качестве значений для свойства vertical-align :

  • baseline , значение по умолчанию или «изначальное»
  • bottom
  • middle
  • sub
  • super
  • text-bottom
  • text-top
  • top

Возможно, многие из них вы не будете использовать, но было бы неплохо знать все имеющиеся варианты. Например, на демо-странице, из-за того что значение vertical-align для установлено как top , он выровнен по самому высокому элементу в строке (большой картинке).

Однако если вы не хотите выравнивать элемент относительно картинок или других строчных элементов, обладающих блочными свойствами, вы можете выбрать значение text-top или text-bottom , тогда элементы будут выравниваться относительно текста в строке.

О ключевом слове middle

К сожалению, правило vertical-align:middle не выровняет строчный элемент по середине самого высокого элемента в строке (как вы, возможно, ожидали). Вместо этого значение middle заставит элемент выровняться по середине высоты гипотетической строчной буквы «x» (так же называемой x-height). Потому, мне кажется, что это значение на самом деле должно называться text-middle , чтобы стало понятно, какой будет результат.

Взгляните на пример, где я увеличил размер шрифта так, чтобы размер x-height стал гораздо больше. После этого станет понятно, что значение middle не получится использовать очень часто.

Числовые значения

Возможно, вы не знали о том, что vertical-align принимает числовые и процентные значения. Однако это так, и вот примеры их использования:

Несмотря на то, что вы можете прочитать в спецификации раздел, описывающий, какие есть ключевые слова и значения, я думаю, гораздо полезней будет самостоятельно поиграть с ними и сравнить результаты.

Заключение

Если в одной фразе подводить итог о том, как использовать это традиционно неправильно понимаемое свойство, я бы сказал:

Свойство vertical-align работает только со строчными элементами или строчными блоками и ячейками таблицы. В случае применения не к ячейкам таблицы, оно действует на сам элемент, а не на его содержимое.

Комментарии +

  1. Roman Petrenko 9 марта 2012 в 15:21

Отлично изложено. Может быть вы выпускаете журнал на который можно подписатся. Если да то скиньте мне на имаил как можно подписаться. Еще раз спасибо!

Вы имеете в виду offline издание?
Если online, то вы можете подписаться на новости и обновления в твиттере: https://twitter.com/#!/webstandards_ru/

Отличная статья, кстати.

Роман, там вверху справа в браузере есть rss 😉

Спасибо за разъяснения, я даже не знал, что он только к инлайнам применяется. По этому обходил трюки с его использованием.

vertical-align у родителя сработает если у детей vertical-align: inherit;

Денис, я не очень понял что вы имеете в виду. Вы не могли бы написать и выложить кейс?
На том же http://jsfiddle.net/ ?

Отличный перевод, только вот относительно ссылочек — не очень удобно на сайте без
Роберт7 апреля 2012 в 22:46

Не хватает информации об особенности поведения vertical-align в разных браузерах и о различных подводных камнях.

Из интересных особенностей, что недавно встречал — inline-block с overflow:hidden выравнивается по разному, в разных браузерах http://jsfiddle.net/dw8EW/12/

Роберт, это не баг, а специфицированная особенность — последняя фраза в разделе о сабже гласит:

The baseline of an ‘inline-block’ is the baseline of its last line box in the normal flow, unless . if its ‘overflow’ property has a computed value other than ‘visible’, in which case the baseline is the bottom margin edge.

Баг как раз только в Хроме, который, к сожалению, вообще неважно справляется с инлайновым форматированием (у него и проценты для vertical-align работают не по стандарту, и не только).

Остается загадкой почему же разработчики css не догадались сделать замену vertical-align для блочных элементов. Это же очевидная необходимость.

FeelGood, лучше поздно, чем никогда — CSS Box Alignment.

Я, признаться, не понимаю такое поведение:
http://jsfiddle.net/Rxu36/1/

Ситуация:
значение vertical-align у элемента span контролирует выравнивание содержимого своего родителя?

Нет, оно контролирует выравнивание самого span, но так как он выше чем высота строки то он растягивает её на нужную высоту, и располагается на нижней её границе, а чтобы это получилось он её как бы растягивает в верх, если бы был по центру то растянул бы в оба направления, текст остаётся на своём месте, если бы он был ниже чем строка то он бы никак ни влиял на соседний текст, он бы сам двигался и всё.

Спасибо, я понял.
Хотя такое псевдо-контроль можно использовать для выравнивания текста по центру, если известна высота контейнера.
http://jsfiddle.net/Rxu36/5/

Благодарю. Стыдно признаться, но тоже думал что vertical-align применяется к содержимому. ну это, на мой взгляд, логично было. но не тут то было))

Чтобы выровнять содержимое блока, надо задать свойство line-height. Тогда vertical-align будет выравнивать элементы внутри блока, как надо.

Чтобы выровнять содержимое блока, надо задать свойство line-height. Тогда vertical-align будет выравнивать элементы внутри блока, как надо.

если сделать объект display: inline-block; или просто inline и задать свойство vertical-align: middle; содержимое тоже не выравнивается!!(

Подскажите, пожалуйста, как выровнять:
Есть блок:

В него помещено построчно три ссылки на шрифт (нестандартный).
В CSS блоке:
.nav li
Как бы я не ровнял, какие бы теги не применял, первое слово в линейке остается на пару-тройку пикселей ниже. Остальные в линию.

Было: vertical-align, justify-content и много всякой отсебятины типа margins:0 ))
Пробовал с изображениями с этим шрифтом: тоже самое.

Буду крайне признателен за помощь!

Это свойство — действительно одно из самых темных в CSS. Делалось наспех, под лозунгом "долой форматирование атрибутами HTML, Вы всё это теперь можете делать через CSS". Как известно, в HTML 3.x вертикальное выравнивание возможно только для ячеек таблицы (атрибут valign, выравнивается содержимое) и для рисунков (т. е. inline-block, атрибут align, выравнивается сам рисунок). Эти особенности и были тупо скомпилированы в одно css-свойство.
Отсутствие удобных и понятных методов вертикального выравнивания вне таблиц — одна из причин, по которой народ неохотно отказывается от табличной верстки.
Вот простая задачка, с которой мне так и не удалось справиться без таблицы или введения элементов-хаков в HTML (что, на мой взгляд, куда хуже, чем table).
text
Нужно сделать, чтобы текст был справа от картинки. При этом и текст и картинка должны быть центрированы по вертикали. Текста может быть много, и в этом случае он должен растягивать div, а картинка — центрироваться или мало, и тогда все должно быть наоборот.

Прошу прощения, тэги съелись. Вот HTML к задачке:
"div" "img. " "p" text "/p" "/div"
Заменил угловые скобки кавычками, писать через амперсенды очень уж муторно.

спасибо за статью! очень помогла 🙂

Как было сказано выше, в случае если vertical-align применяется к ячейке таблицы, — то оно должно влиять именно на расположение содержимого этой ячейки, однако:

Vertical-align — Легендарное свойство, которое вроде-бы и работает, но по факту — нет! Давайте разбираться, почему так происходит и что нужно, чтобы оно заработало

Многие все еще помнят те времена, когда в верстке повсеместно использовались таблицы, к ячейкам которых применялись:

По умолчанию все элементы центрируются по центру вертикальной оси и такой трюк поднимает все элементы внутри ячейки вверх. В CSS свойство vertical-align работает частично так же, но подчиняется трем правилам:

а это значит, что код ниже абсолютно ничего не делает, т.к. первый пункт не выполнен — не задан тип блока.

Ну а если нет возможности указать inline или inline-block блок, то на помощь всегда придут padding и margin. Пример ниже для не фиксированной высоты блока, где мы отступами отрегулируем оптимальную высоту и элементы останутся в центре и на этом конец.

Аналогично и с фиксированной высотой. Вручную ставим оптимальный отступ до тех пор, пока элементы не займут оптимальную позицию. Отличием от примера выше является то, что элементы не будут находиться по центру.

Есть родительский div (зеленый на примере-рисунке) и есть два независимых div-блока с текстом и прочими элементами внутри (красный на рисунке).

В левом мало текста, а во втором — много.

Требуется, чтобы элементы слева всегда были посередине относительно элементов справа, как на рисунке этом:


(источник: joxi.ru)

Я знаю, что для этого ворде как нужно использовать vertical-align: middle, но результат не тот, что нужен. Получается идентично как если бы я bottom написал.

Почему не работает vertical-align: text-bottom?

Я не могу заставить текстовое дно работать должным образом. Из того, что я читаю, div должен быть выровнен по нижней части текста, однако он выравнивает его по нижней части, как если бы он был выровнен по "bottom".

div {
  display: inline-block;
  vertical-align: text-bottom; //same as bottom
  text-align: center;
  text-decoration: underline;
}

div:first-child {
  width: 100px;
  height: 200px;
  border: 3px solid black;
  line-height: 100px;
}

div:nth-child(2) {
  width: 50px;
  height: 50px;
  line-height: 50px;
  border: 2px solid red;
}
<div>hello</div>
<div>world</div>
css css3 Поделиться Источник user8398574     11 февраля 2018 в 23:11

3 Ответа



3

"should be aligned by the bottom of the text..." - это vertical-align: baseline, который является настройкой по умолчанию для встроенных блоков, поэтому вы можете просто полностью стереть это свойство, и DIVs выровняется по их самым низким строкам текста:

div {
  display: inline-block;
  text-align: center;
  text-decoration: underline;
}

div:first-child {
  width: 100px;
  height: 200px;
  border: 3px solid black;
  line-height: 100px;
}

div:nth-child(2) {
  width: 50px;
  height: 50px;
  line-height: 50px;
  border: 2px solid red;
}
<div>hello</div>
<div>world</div>

Поделиться Johannes     11 февраля 2018 в 23:24



0

Text-align предназначен для выравнивания элементов с текстом родителя, а не брата

main{
}

div {
  display: inline-block;
  text-align: center;
  text-decoration: underline;
  vertical-align: text-bottom;

}

div:first-child {
  width: 100px;
  height: 200px;
  border: 3px solid black;
  line-height: 100px;
}

div:nth-child(2) {
  width: 50px;
  height: 50px;
  line-height: 50px;
  border: 2px solid red;
}
<main>
  Text
  <div>hello</div>
  <div>world</div>
</main>

Вы все еще можете уйти с ним, если только установите его на одном из них, а не на обоих

div {
  display: inline-block;
  text-align: center;
  text-decoration: underline;
}

div:first-child {
  width: 100px;
  height: 200px;
  border: 3px solid black;
  line-height: 100px;
}

div:nth-child(2) {
  width: 50px;
  height: 50px;
  line-height: 50px;
  border: 2px solid red;
  vertical-align: text-bottom; 
}
<div>hello</div>
<div>world</div>

Поделиться Facundo Corradini     11 февраля 2018 в 23:19



-2

vertical-align не работает с элементами уровня блока. Читайте о vertical-align на MDN

вертикальное выравнивание применяется только к элементам inline и table-cell: вы не можете использовать его для вертикального выравнивания элементов уровня блока.

Поделиться Ginkoid     11 февраля 2018 в 23:17


Похожие вопросы:


Почему "vertical-align middle" не работает с этой ячейкой таблицы?

Я начинаю новый проект, и у меня уже есть вертикально выровненное содержимое в ячейках <td> , поэтому эта ошибка была немного неожиданной. Кроме того, любое исследование, которое я делаю...


div vertical-align не работает

У меня есть простая страница HTML, в которой я хочу выровнять Div вертикально посередине другого div. Существует один способ использования концепции позиционирования. Но я хочу использовать свойство...


regex &align:%HORIZONTAL%|%VERTICAL%

Я хотел бы иметь regex, который соответствует чему-то вроде этого: &align:%HORIZONTAL%|%VERTICAL% %HORIZONTAL% может быть left или right или center %VERTICAL% может быть top или bottom или...


CSS: почему "vertical-align: middle" не работает?

Рассмотрим следующий пример: ( live demo здесь ) HTML: <a><img src=http://img.brothersoft.com/icon/softimage/s/smiley.s_challenge-131939.jpeg /></a> CSS: a { display: block;...


CSS: Label vertical-align-не работает для последней метки-почему?

Вопрос: Я пытаюсь адаптировать поле для комментариев с этого сайта http://www.mentby.com/Group/mono-aspnet-list/input-data-cannot-be-coded-as-a-valid-certificate.html на мой сайт. Я успешно...


Почему vertical-align:middle не работает как text-align:center

Может кто-нибудь объяснить мне, почему vertical-align:middle не работает как text-align:center ? Я имею в виду, почему так трудно заставить его работать? Я хочу знать, почему эти W3 ppl не делают...


'vertical-align: middle' не работает

http://codepen.io/abdulahhamzic/pen/rLBoOj Я пытаюсь получить абзацы (имя и другую информацию о потоке), чтобы они были вертикально выровнены в середине их родителей div. Я пытаюсь этот код CSS и он...


Почему "text-align: left;" здесь не работает?

Я использовал text-align: left; в классе css name-tag , но каким-то образом имя все еще выровнено по правой стороне div. Почему? .container { width:500px; position:absolute; display:table; border:...


vertical-align: middle перемещает элемент в неправильном направлении, но vertical-align: top работает должным образом

У меня есть три встроенных блочных элемента внутри контейнера div. HTML выглядит следующим образом: <div class=container> <div class=field>Text</div> <div...


Выровнять текст внутри div-vertical-align не работает

я пытаюсь вертикально выровнять текст, который находится внутри div. Но по какой-то причине вертикальное выравнивание не работает. .CV{ width: 100px; height: 150px; margin-left:auto;...


CSS: почему "vertical-align: middle" не работает?

Рассмотрим следующий пример: (live demo здесь )

HTML:

<a><img src="http://img.brothersoft.com/icon/softimage/s/smiley.s_challenge-131939.jpeg" /></a>

CSS:

a {
    display: block;
    background: #000;
    line-height: 40px;  
}
img {
    vertical-align: middle;
}

Выход есть:

enter image description here

Почему изображение не центрировано вертикально ?

Как я могу исправить это, чтобы он работал во всех основных браузерах ?

Пожалуйста, не принимайте никакого размера изображения (например, 32x32 в этом случае), потому что в реальном случае размер изображения неизвестен.

html css vertical-alignment Поделиться Источник Misha Moroshko     19 июля 2011 в 06:41

8 Ответов



3

Для этого можно использовать position:absolute; .

Например:

a {
    display: block;
    background: #000;
    line-height: 40px;
    height:80px;
    position:relative;  
}

img {
    position:absolute;
    top:50%;
    margin-top:-16px;
}

NOTE: это дает margin-top половину размера изображения.

Проверьте это http://jsfiddle.net/cXUnT/7/

Поделиться sandeep     19 июля 2011 в 06:57



1

Вы должны иметь display: table-cell я думаю, это работает только в таблицах.. Я использую line-height , равное высоте элемента, и это тоже работает.

Поделиться Gatekeeper     19 июля 2011 в 06:43



1

Я не могу сказать вам точно, почему это происходит (мне самому любопытно). Но это работает на меня:

a {
    display: block;
    background: #000;
    line-height: 40px;  
}
img {
    vertical-align: middle;
    margin-top:-4px; /* this work for me with any given line-height or img height */
}

Поделиться Tommy Bravo     19 июля 2011 в 07:01



1

У меня была та же проблема. Это работает для меня:

 <style type="text/css">
    div.parent {
         position: relative;
    }

    /*vertical middle and horizontal center align*/
    img.child {
        bottom: 0;
        left: 0;
        margin: auto;
        position: absolute;
        right: 0;
        top: 0;
    }
    </style>

    <div>
        <img> 
    </div>

Поделиться algreat     26 января 2013 в 19:51



0

Если вы знаете вертикальный размер элемента и высоту линии, то вы можете вертикально центрировать его, используя vertical-align: top плюс верхнее поле.

Для иллюстрации я создал: http://jsfiddle.net/feklee/cXUnT/30/

Поделиться feklee     11 апреля 2012 в 20:52



0

Не знаю , в чем причина.

Удаление line-height и добавление margins к изображению делает трюк.

a {
  display: block;
  background: #f00;
}
img {
  margin: .3em auto;
  vertical-align: middle;
}
<a>
 <img src="https://placeimg.com/30/30/any">
</a>

Поделиться ''     03 января 2017 в 19:41



0

Просто поместите тег img в тег div набор display:table-cell вертикальное выравнивание: середина к div. Родительский тег должен быть display:table

Пример:

Css

a {
 display: table;
 background: #000;
 height:200px;
}
div {
 display:table-cell;
 vertical-align: middle;
}

HTML

<a>
 <div>
  <img src="http://img.brothersoft.com/icon/softimage/s/smiley.s_challenge-  131939.jpeg" />
 </div>
</a>

Поделиться Ismail Rubad     03 января 2017 в 18:40



-1

Попробуйте использовать фоновое изображение на <a> :

<a href="#"></a>    
a {display:block;background:#000;line-height:40px;background:#000 url(http://img.brothersoft.com/icon/softimage/s/smiley.s_challenge-131939.jpeg) no-repeat left center;text-indent:-999px}

Поделиться user844324     19 июля 2011 в 07:04


Похожие вопросы:


Почему "vertical-align: middle;" не работает с "min-height"?

Когда я устанавливаю min-height и vertical-align: middle;, текст не выравнивается по вертикали. Первый пример: http://jsfiddle.net/pkaXR / Как изменить css выравнивание изображения и текста по...


Почему "vertical-align middle" не работает с этой ячейкой таблицы?

Я начинаю новый проект, и у меня уже есть вертикально выровненное содержимое в ячейках <td> , поэтому эта ошибка была немного неожиданной. Кроме того, любое исследование, которое я делаю...


Используйте 'vertical-align: middle;' не работайте для меня в CSS

У меня есть два вида в супер-виде, код ниже: <view class=search> <view class=section> <input id=input-word placeholder=请输入您要查询的文本 focus/> <navigator id=cancel-button...


Почему vertical-align: middle выталкивает мое изображение из контейнера?

JSFiddle ссылка HTML: <div id=va-m> <img src=http://placehold.it/150x150> <h2> vertical-align: middle </h2> </div> <div id=no-va> <img...


'vertical-align: middle` не делает то, что я ожидал

Если я нахожусь в ячейке таблицы в применении правила CSS vertical-align: middle; к этой ячейке, то весь текст центрируется вертикально в ячейке. <table> <tr> <td...


"vertical-align: middle" не выравнивается по середине в Firefox

Я пытаюсь выровнять некоторые тексты разных размеров по вертикали, однако Firefox отображает меньший текст намного выше середины. CSS: div.categoryLinks { margin: 1em 16px; padding: 0 4px;...


CSS 'vertical-align: middle' не работает?

Я ожидаю, что следующий документ html приведет к Красному квадрату, вертикально центрированному в желтом квадрате: <html> <body> <div...


'vertical-align: middle' не работает

http://codepen.io/abdulahhamzic/pen/rLBoOj Я пытаюсь получить абзацы (имя и другую информацию о потоке), чтобы они были вертикально выровнены в середине их родителей div. Я пытаюсь этот код CSS и он...


vertical-align: middle перемещает элемент в неправильном направлении, но vertical-align: top работает должным образом

У меня есть три встроенных блочных элемента внутри контейнера div. HTML выглядит следующим образом: <div class=container> <div class=field>Text</div> <div...


Почему "vertical-align: middle" нажимает текст ниже окружающего текста?

Напр.. 1234<span style=vertical-align: middle>567</span>890 Будет отображаться с 567 немного ниже окружающих чисел. http://jsfiddle.net/zBy9D /


Почему 'Vertical-align:bottom' не работает на этой таблице

Это сводило меня с ума, к сожалению, ха-ха. Я не могу понять, почему я не могу заставить "X's" в моей таблице выровняться с нижней частью таблицы... Я пробовал поставить вертикальное выравнивание в разных местах в CSS, но безрезультатно :(. Кроме того, правильно ли я использую для пустых мест в моей таблице?

Вот фрагменты как моих HTML, так и CSS files...any комментариев, которые были бы очень признательны

<html>
<head>
<title>Day4: Table King</title>
<link rel="stylesheet" type="text/css" href="stylesday4.css" />
</head>

<body>
 <table>
  <tr>
  <th><span></th>
<th>Free Version</th>
<th>Lite Version</th>
<th>Full Version</th>
 </tr>
 <tr>
  <td>Advertising</td>
  <td>X</td>
  <td><span></td>
  <td><span></td>
 </tr>
 <tr>
  <td>Catering Software</td>
  <td><span></td>
  <td>X</td>
  <td>X</td>
 </tr>
....
#products
{
border-collapse:collapse;
width:100%;
}
#products th, #products td
{
border:1px solid #0000FF;
background-color:#C0C0C0;
padding:3px 2px 7px 5px;
}
#products th
{
font-size:20px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
color:#0000FF;
padding-top:4px;
padding-bottom:5px;
background-color:green;
}
#products td
{
vertical-align:bottom;
}
#products tr
{
text-align:center;
color:#0000FF;
}
#products tr.alt td
{
color:blue;
background-color:#A7C942;
}
html css text vertical-alignment alignment Поделиться Источник yoshyosh     01 декабря 2010 в 10:28

5 Ответов



3

Вы можете использовать position: relative на своих td и table, а затем переместить td на дно с помощью bottom: 0px .

Тем не менее, я думаю, что этот сайт должен ответить на ваш вопрос немного более четко: http://shouldiusetablesforlayout.com

Поделиться Greg     01 декабря 2010 в 10:31



1

это потому, что у вас есть 7px нижняя прокладка в td . Вы можете изменить его на

padding:3px 2px 0 5px;

и расстояние исчезло.

http://jsfiddle.net/6AAvH/2/

Поделиться 太極者無極而生     01 декабря 2010 в 10:35



1

С HTML и CSS, которые вы предоставили, вертикальное выравнивание, похоже, работает, как я и ожидал. Я настроил небольшой тест на jsfiddle здесь http://jsfiddle.net/dttMd/ . Я поставил несколько разрывов строк в первой строке, чтобы подтвердить, что следующий текст был выровнен снизу. Если это не то, что вам нужно, не могли бы Вы уточнить, что именно вам нужно.

Что касается пустых ячеек, то то, что вы делаете, неправильно, так как элементы <span> должны иметь закрывающий тег. Мое личное предпочтение-это просто поместить в ячейки &nbsp; . Я не думаю, что действительно существует способ "right", хотя и обязательно (хотя я счастлив быть исправленным).

Поделиться Chris     01 декабря 2010 в 10:41



0

Обивка может испортить макет и height/width. избавиться от обивки из вашего td и дать ему высоту вместо этого.

Иногда высота линии может показаться, что она не выравнивается по верхнему или нижнему краю. Если размер шрифта меньше, чем его контейнер, он может наследовать высоту строки. Если вы установите высоту строки в размер шрифта (или просто line-height: 1) и дадите td высоту, это должно сделать трюк.

<td valign="bottom">TEXT</td>

Ваш <span> отсутствует закрывающий </span>, и вы не должны использовать span, чтобы занять место, так как это встроенный элемент. Для таблиц вам даже не нужен заполнитель, но если вам удобнее, вы можете использовать &nbsp; или если вы хотите, чтобы он унаследовал какой-то стиль заполнения/поля, вы можете использовать этот элемент ( <p>&nbsp;</p> или <h4>&nbsp;</h4> ).

Поделиться PBwebD     18 марта 2015 в 13:31



-1

Вы можете просто добавить valign="bottom" в каждом td , и это сделает контент выровненным в нижней части и поддерживается каждым браузером в мире!

Надеюсь, это вам поможет.

Поделиться Jack Billy     04 апреля 2011 в 08:44


Похожие вопросы:


Как установить div блок 'vertical-align:bottom' на изображении

Как установить div block vertical-align:bottom? (Блок div должен быть поверх изображения.) .block{ background-color:#999999; width:480px;height:100px; position:absolute; display: table-cell;...


vertical-align:bottom на ребенка див

Я пытаюсь получить Hello world div, чтобы быть в нижней части родительского div, но не повезло. Есть идеи? <ItemTemplate> <div style=float: left; padding-right: 0px; width: 98%; width:...


Вертикальное выравнивание: снизу не работает

Я думал, что вертикальное выравнивание должно было работать со встроенными элементами. Однако по какой-то причине все в сером div выровнено по верху , а не по низу. <div style=position:absolute;...


Как использовать jQuery для выбора этого элемента: <span>

Как я могу использовать jQuery (или vanilla JS, или CSS)для выбора следующего диапазона? <span style=vertical-align:bottom> Поворот заключается в том, что я не могу поместить класс на span или...


vertical-align:bottom WITH float:left

как я могу сделать vertical-align:bottom для некоторых дивов, которые имеют float:left ? вы можете посмотреть источник здесь: http://jsfiddle.net/Lb1su4w2 / вот что у меня есть: (каждый цвет-это...


Firefox понимает "display:table-cell; vertical-align:bottom;" по-разному

У меня есть table , содержащий несколько span С. Я устанавливаю высоту этих span динамически и работать в процентах (своего рода гистограмма). Контейнер этих span s имеет фиксированную высоту, и мне...


Как vertical-align:bottom 2 плавали дивы с текстом

У меня есть проблема с css. Я создал этот jsfiddle, чтобы показать его- https://jsfiddle.net/5k92h026/19 / Мой код-это: .left {float:left} .wrapper{width:690px;} .first-div...


Почему vertical-align:middle не работает как text-align:center

Может кто-нибудь объяснить мне, почему vertical-align:middle не работает как text-align:center ? Я имею в виду, почему так трудно заставить его работать? Я хочу знать, почему эти W3 ppl не делают...


как сделать vertical-align:bottom, но до 10px

Я бы хотел иметь два встроенных блока со вторым размером vertical-align:bottom, но до 10 пикселей. Я не знаю, как бы я это сделал. Я думаю примерно так, но как мне переместить класс test2 на 10...


вертикальное выравнивание: почему это не работает для меня?

Вот это html: <div style=height: 100px> <span style=vertical-align:top;>top</span> <span style=vertical-align:bottom;>bottom</span> </div>...


Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *