Вертикальное выравнивание всех (!) Элементов в TD?

243
18

У меня есть простой table с 1 TD с vertical-align:middle;. Этот TD содержит Image:


<table>
<tr>
<td>
<img src='http://static.jsbin.com/images/favicon.png'/>
</td>
</tr>
</table>

enter image description here


Все нормально, а IMG - по вертикали.


Но Если я добавлю другие элементы после этого изображения (например, span):


  <td>
<img src='http://static.jsbin.com/images/favicon.png'/>
<span>aaa</span>
</td>

Результат:


enter image description here


Вопрос


Не вертикальное выравнивание TD должно вертикально выравнивать все его дочерние элементы?


Как сделать span для центровки также?


Полный JSBIN


Н.Б.


Я не хочу добавлять еще TD и не использовать float с дополнением /margin. IE8 +.


Изменить

Желаемый результат:


enter image description here

спросил(а) 2013-09-22T09:39:00+04:00 7 лет назад
1
Решение
268

Вопрос
Не вертикальное выравнивание TD должно вертикально выравнивать все его дочерние элементы?



NO.

Когда вы применяете vertical-align к td, он применяется только к td и не, унаследованному любым из его дочерних элементов.


Если у меня есть TD с только пролетом в нем - он будет вертикально выровнен. Если бы у меня был TD с IMG внутри него - он также будет выровнен.



Это связано с тем, как работает vertical-align для td. Вычисляется общая высота ячейки i.e td и вся ячейка выровнена по вертикали.


Если есть один img, тогда высота td такая же, как высота img, поэтому кажется, что vertical-align для img также middle. Но на самом деле, td выравнивается по вертикали к середине с помощью img как vertical-align : baseline


То же самое происходит, когда есть один span.


но если у меня есть оба - это не так. почему это?


Поскольку теперь height of td представляет собой объединенный height как img + span. Итак, фактически, td выравнивается по вертикали в середине, но не img и span.


Как я могу сделать, чтобы промежуток был также центрирован?



Вам нужно применить этот CSS:


td > * {
vertical-align : middle;
}

Это применит CSS ко всем дочерним элементам.


Посмотрите JSFiddle для лучшего изображения.


Надеюсь, это ответит на ваш вопрос.

ответил(а) 2013-09-24T13:43:00+04:00 7 лет назад
115

Вы можете просто использовать vertical-align: middle; для своего диапазона


img
{
height:43px;width:43px;
display: inline;
vertical-align: middle;
}

span
{
vertical-align:middle;
display: inline;

}


ваш jsbin


Согласно комментарию


Вы можете думать, что если td задан vertical-align: middle;, тогда он должен выровнять все содержимое внутри этого, но иметь изображение и интервал, в котором браузер понимает, что изображение - это что?: это встроенный или встроенный блок, поэтому вам нужно установить отображение: встроенный или встроенный блок; Тогда вы можете увидеть, что его работа только применяет свойство отображения для изображения. демо

Edit


img tag: source: отображать встроенные и встроенные блоки


Они являются "блочными" элементами, поскольку они имеют ширину и высоту.


Это правда, они оба - или, точнее, являются элементами "встроенного блока". Это означает, что они текут как текст, но также имеют ширину и высоту, такие как элементы блока.


Также проверьте это:


Замещенные элементы


Замененный элемент - это любой элемент, внешний вид и размеры которого определяются внешним ресурсом. Примеры включают изображения (теги), плагины (теги) и элементы формы (,, и теги). Все остальные типы элементов можно назвать непримененными элементами.

Замененные элементы могут иметь внутренние значения - ширину и высоту, которые определяются самим элементом, а не его окружением в документе. Например, если элемент изображения имеет ширину, установленную в auto, будет использоваться ширина файла связанного изображения. Внутренние размеры также определяют внутреннее соотношение, которое используется для определения вычисленных размеров элемента, только если задано только одно измерение. Например, если для элемента изображения задана только ширина изображения, например, 100 пикселей, а фактическое изображение имеет ширину 200 пикселей и высоту 100 пикселей, высота элемента будет масштабироваться на ту же величину, что и 50 пикселей.

Замененные элементы также могут иметь требования визуального форматирования, налагаемые элементом, вне контроля CSS; например, элементы управления пользовательским интерфейсом, отображаемые для элементов формы.

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


ответил(а) 2013-09-22T09:52:00+04:00 7 лет назад
82

Здесь решение JS fiddle


fiddle


Здесь css


  table
{
border:solid 1px red;
width:300px;
}

td
{
height:100px;
vertical-align:middle;
width:100%;
border:solid 1px green;
}
img
{
display: inline;
height: 43px;
width: 43px;
position: relative !important;
float: left;
}

span
{
height: auto !important;
width: 80%;
float: right;
position: relative;
vertical-align: middle !important;
text-align: left;
}

ответил(а) 2013-09-24T14:59:00+04:00 7 лет назад
70

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


Вот что W3 Spec говорит о vertical-align: middle:

Центр ячейки выровнен с центром строк, в которые он охватывает.

enter image description here



Расчет высоты строки:


Высота поля элемента "таблица-строка" вычисляется после того, как пользовательский агент имеет все ячейки в доступной строке: это максимум строки, вычисленной "высота" , вычисленная "высота" каждой ячейки в строки и минимальной высоты (MIN), требуемой ячейками.

В CSS 2.1 высота ячейки ячейки - это минимальная высота, требуемая содержимым. Свойство "высота" ячейки таблицы может влиять на высоту строки (см. Выше), но она не увеличивает высоту ячейки ячейки.

Ячейки ячеек, которые меньше высоты строки, получают дополнительное верхнее или нижнее дополнение.



В результате вышесказанного высота tr и td становится 100px, но ячейка ячейки занимает только высоту, требуемую содержимым (img height = 43px). Теперь, поскольку ящик сотовой ячейки меньше высоты строки, добавляется дополнительное дополнение, как показано в блоке 5 вышеприведенного изображения, и, таким образом, содержимое также выравнивается к середине.


TD имеет только изображение:


Когда есть только img, высота содержимого равна высоте img. Таким образом, он попадает в середину.


enter image description here


Как видно из приведенного выше изображения, это не требует vertical-align: middle в img явно, потому что td выравнивает его содержимое до середины.


TD имеет только встроенные данные:


Если td имеет только span или span плюс встроенный div, высота содержимого равна по умолчанию line-height для текста (или любого указанного line-height). В этом случае также td выравнивает его правильно.


enter image description here


Когда текстовое содержимое выходит за пределы первой строки (см. демонстрацию), вы можете видеть, что td автоматически выталкивает first-line (помечен на голубом фоне) вверх, чтобы обеспечить выравнивание содержимого в целом к середине (не только к одной строке).


TD имеет изображение и диапазон:


Когда мы помещаем img и span (встроенный текст) в td, высота содержимого становится равной высоте img плюс line-height второй и последующих строк.


В этой ситуации возможны два случая, как описано ниже:


Случай 1 - img тег не имеет vertical-align указанного


В этом случае img выравнивается с baseline (по умолчанию). Затем td выравнивает весь контент до середины. Это означает, что td располагается вокруг 28.5px (= (100-43)/2) разрыва вверху и внизу содержимого. Опять же, vertical-align на td выполняет задание, оно помещает содержимое в середину (то есть оставляют равный промежуток сверху и снизу). Но текст отбрасывается, потому что высота img больше.


enter image description here


Если мы уменьшим высоту img до высоты строки (скажем, 10px), мы увидим, что даже при img + span она выравнивается к середине.


Случай 2 - img имеет vertical-align: middle


В этом случае также vertical-align на td делает то же самое, что и для случая 1. Однако текст в этом случае рядом с серединой, потому что img также выровнена с middle строки.


enter image description here


table {
border: solid 1px red;
}
td {
height: 100px;
width: 200px;
vertical-align: middle;
border: solid 1px green;
}
img {
height: 43px;
width: 43px;
border: solid 1px green;
}
.one td + td img {
vertical-align: middle;
}
.three td + td img {
height: 10px;
width: 10px;
}
.four img {
vertical-align: middle;
}
.five img + img{
height: 50px;
width: 50px;
}
td:first-line {
background-color: cyan;
}
div {
display: inline;
}

<table>
<tr class='one'>
<td>
<img src='http://static.jsbin.com/images/favicon.png' />
</td>
<td>
<img src='http://static.jsbin.com/images/favicon.png' />
</td>
</tr>
<tr class='two'>
<td>
<div>aaa</div>
<span>aaa</span>
</td>
<td>
<div>aaa</div>
<span>aaa aaaaaaa aaaaaaaa aaaaaaaa</span>
</td>
</tr>
<tr class='three'>
<td>
Case 1
<img src='http://static.jsbin.com/images/favicon.png' />
<span>Image + Span</span>
</td>
<td>
Case 1
<img src='http://static.jsbin.com/images/favicon.png' />
<span>Image + Span</span>
</td>
</tr>
<tr class='four'>
<td>
Case 2
<img src='http://static.jsbin.com/images/favicon.png' />
<span>Image + Span</span>
</td>
<td>
<img src='http://static.jsbin.com/images/favicon.png' />
<span>Image + Span + more text.......</span>
</td>
</tr>
<tr class='five'>
<td>
Case 3
<img src='http://static.jsbin.com/images/favicon.png' />
<img src='http://static.jsbin.com/images/favicon.png' />
<span>Image + Span text...</span>
</td>
<td>
<img src='http://static.jsbin.com/images/favicon.png' />
<span>Image + Span + more text.......</span>
</td>
</tr>
</table>

ответил(а) 2013-09-25T11:58:00+04:00 7 лет назад
71

Просто добавьте vertical-align:middle; в свой стиль img?


Демо

ответил(а) 2013-09-24T10:48:00+04:00 7 лет назад
57

<style>
table
{
border:solid 1px red;
width:300px;
}

td
{
height:100px;
width:100%;
border:solid 1px green;
vertical-align:middle;
line-height:100px;
}
img
{
height:43px;width:43px;
vertical-align:middle;
}
</style>

ответил(а) 2013-09-24T22:03:00+04:00 7 лет назад
41

Этот атрибут CSS не распространяется на другие типы элементов. Когда начинающий разработчик применяет вертикальные выравнивания к обычным элементам блока (например, стандарт), большинство браузеров устанавливают значение для наследования для всех встроенных дочерних элементов этого элемента.


Вам просто нужно добавить vertical-align: middle в класс <img>.


Ваш CSS должен выглядеть так:


table
{
border:solid 1px red;
width:300px;
}

td
{
height:100px;
vertical-align:middle;
width:100%;
border:solid 1px green;
}
img
{
height:43px;width:43px;
vertical-align: middle;
}


Вы можете просмотреть Пример скрипта ...

ответил(а) 2013-09-24T16:46:00+04:00 7 лет назад
42

Я думаю, что мы почти все, но


td img,
td span {
display:inline-block;
vertical-align:middle;
}

похоже, работает.


Пример Codepen


Или я что-то не хватает?

ответил(а) 2013-09-24T14:24:00+04:00 7 лет назад
41

DEMO


просто добавьте этот класс:


td *{
vertical-align:middle
}

Изменить:

вопрос, почему, когда вы добавляете pic в текст td, идет снизу pic и не больше середины td.


это мой ответ:


когда вы устанавливаете td vertical-align на middle, он не должен устанавливать все содержимое vertical-align в middle, они все еще baseline. и когда вы добавляете pic в текст, высота линии увеличивается до высоты изображения, а текст - снизу этой высоты, поэтому вам нужно установить vertical-align в middle для устранения этой проблемы.


здесь вы можете увидеть, что я сказал: DEMO


и извините за мой плохой английский

ответил(а) 2013-09-24T10:31:00+04:00 7 лет назад
41

Это то, что вы имеете в виду? http://jsfiddle.net/JFVNq/


Причина в том, что пробелы обрабатываются как встроенные, поэтому вам нужно блокировать их.


CSS для диапазона:


td.vert span
{
vertical-align: middle;
display: block;
}

ответил(а) 2013-09-22T09:43:00+04:00 7 лет назад
-4

Просто переместите вертикальное выравнивание: среднее от пролета до изображения.


Изображение выравнивается по тексту; работает лучше, чем наоборот;)


img
{
height:43px;width:43px;
vertical-align:middle;
}

http://jsfiddle.net/ZnpNF/1/

ответил(а) 2013-09-24T14:03:00+04:00 7 лет назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема