Ответ 1

Вопрос
Не вертикальное выравнивание 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 для лучшего изображения.

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

Ответ 2

Вы можете просто использовать 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; например, элементы управления пользовательским интерфейсом, отображаемые для элементов формы.

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

Ответ 3

Здесь решение 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;
}

Ответ 4

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

Демо

Ответ 5

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

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

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

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

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

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

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

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

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

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

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

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

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

Когда текстовое содержимое выходит за пределы первой строки (см. демонстрацию), вы можете видеть, что 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 больше.

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

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

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

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>

Ответ 6

<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>

Ответ 7

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

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

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

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

Ответ 8

DEMO

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

td *{
  vertical-align:middle
}

Изменить:

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

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

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

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

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

Ответ 9

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

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

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

Пример Codepen

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

Ответ 10

Этот атрибут 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;
}

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

Ответ 11

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

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

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

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