it-swarm.com.ru

Выровнять по вертикали все (!) Элементы в ТД?

У меня есть простой 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

Все Ok и IMG выровнен по вертикали.

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

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

Результат: 

enter image description here

Вопрос

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

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

Полный JSBIN

NB

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

Правка:

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

enter image description here

40
Royi Namir

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

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

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

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

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

То же самое имеет место, когда существует одна переменная span.

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

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

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

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

td > * {
    vertical-align : middle;
}

Это будет применять CSS для всех детей.

Проверьте JSFiddle для лучшей картинки.

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

56
Nikhil Patel

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

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

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

}

ваш jsbin


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


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

Правка

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

Они являются «блочными» элементами в том смысле, что они имеют ширину и высоту.

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

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

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

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

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

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

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

7
Bhojendra Rauniyar

Во всех случаях 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>

3
Harry

Вот решение JS Fiddle

скрипка

Вот ксс

  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;
}
3
Anobik

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

Демо

2
Jazcash
<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>
1
Ankit Agrawal

Tento atribut CSS nepřejde na žádné jiné druhy prvků . Вы можете узнать, что вы делаете, чтобы увидеть, как вернутся к нормальным элементам (стандарт яко), как показано на рисунке, в котором содержится встроенный элемент данных.

Stačí přidat vertical-align: middle do třídy <img>.

Ваши CSS от méla vypadat takto ...

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

Můžete zobrazit Sample Fiddle ...

0
webfrogs

DEMO

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

td *{
  vertical-align:middle
}

Правка:

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

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

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

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

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

0
Mohsen Safari

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

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

похоже на работу.

Пример Codepen

Или я что-то упустил?

0
Paulie_D

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

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

CSS для пролета:

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