valign против выравнивания текста в HTML

Question

Я не могу понять разницу между valign и text-align в HTML в контексте следующего кода:

    <table width="500" border="0">
  <tr>
        <td colspan="2" style="background-color:#FFA500;">
   <h1>Main Title of Web Page</h1>
   </td>
      </tr>

  <tr valign="top">
      <td style="background-color:#FFD700;width:100px;text-align:top;">
      <b>Menu</b><br />
    HTML<br />
      CSS<br />
  JavaScript
     </td>
   <td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">
      Content goes here</td>
    </tr>

   <tr>
     <td colspan="2" style="background-color:#FFA500;text-align:center;">
     Copyright © 2012</td>
   </tr>
   </table>

Answer 1

valign (атрибут html) эквивалентен vertical-align в css

align (атрибут html) эквивалентен text-align в css

версии атрибутов html устарели в пользу css

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

text-align расположение встроенных элементов (например, span, текст по умолчанию) внутри элементов блока по горизонтали

Answer 2

Правильные значения для выравнивания текста: left | right | center | justify, так как он горизонтальный, а valign вертикальный, поэтому его верхняя | средняя | нижняя | базовая линия.Вы также можете использовать унаследовать оба.

Плюс, выравнивание текста - это css, а valign - это атрибут html.Я думаю, что align - это HTML, эквивалентный text-align, в то время как вертикальное выравнивание эквивалентно valign.

http://www.w3schools.com/cssref/pr_text_text-align.asp

http://www.w3schools.com/tags/att_td_valign.asp

Если вы переключите text-выровняйте по «дну», вы заметите, что он не двигается, так как нижняя недопустима для выравнивания текста.По умолчанию (я думаю) это топ.Однако, если вы введете «vertical-align: bottom», оно перейдет к низу.

Простой поиск в Интернете найдет вам эти ответы ...

Answer 3

text-align для горизонтального выравнивания в CSS и стилях, где vertical-align для вертикального выравнивания. Тогда у нас align="center" valign="top" есть соответствующие атрибуты в HTML для той же цели.

Подробнее о HTML и CSS , это мое предложение.

Answer 4

Значение text-align: top; не является действительным css, text-align является горизонтальным, а не вертикальным. Здесь valign="top" вступает в игру. Ввод valign="left" недействителен так же, как text-align: top; недействителен. valign вертикально.

Answer 5

Значение top для text-align не поддерживается ( только left | center | right | justify | start | end) .. поэтому оно не работает так, как вы ожидаете ...

The text-align ^{MDN docs} свойство для горизонтального выравнивания.

Вертикальное выравнивание, которое вы наблюдаете в своем примере, обусловлено свойством valign="top" элемента tr.

Посмотрите на ваш пример без valign на http://jsfiddle.net/gaby/PvtAU/, и вы заметите это.

valign действительно только для tr ^{MDN документы} и td ^{MDN документы} элементов, и устарел в html 4.01 и устарел в html5.
Использовать vertical-align ^{MDN документы} вместо ..

Answer 6

valign будет выравнивать по вертикали все элементы, тогда как text-align специально для текста.