Простой HTML, который выходит далеко?

Question

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

HTML:

<div id="items">
  <div class="category"><h1>Apparel</h1></div>
  <div class="list-product">
  <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
      <td width="50" align="center" style="padding-right: 5px;">
        <img height="30" src="/images/products/none.jpg" />
      </td>
      <td>
        <img style="padding: 0 3px 0 0;" src="/images/icons/flag_red.png" />
      </td>
      <td valign="middle">
        <strong>Test Product</strong><br />
        <span style="color: #777;">This has a short description.</span>
      </td>
    </tr>
  </table>
  </div>
  ... and the other table here
</div>

CSS:

div#items
{
width: 400px;
}

div.category
{
padding: 7px 13px;
background: #f0f0f0;
color: #101010;
font-size: 20px;
border-bottom: 1px solid #d0d0d0;
}

.list-product
{
border-bottom: 1px solid #ddd;
font-size: 12px;
padding: 10px;
}

Answer 1

Чтобы добавить ответ Пита и использовать CSS вместо встроенной разметки представления, вы можете попробовать добавить vertical-align: middle к css для ячеек таблицы.

В качестве запоздалой мысли вы можете добавить line-height: 100px (или как высоко ваше изображение, плюс небольшое отступление) к вашему CSS для ячеек, содержащих изображения, и указать line-height: 50px (50% строки -высота ячеек изображения) для ячеек, содержащих описательный текст, я не уверен, что это будет работать, но иногда это работает для центрирования текста, когда vertical-align не работает.

Answer 2

Используете ли вы файл сброса CSS? Для меня это похоже на CSS. Может быть, высота строки?

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

  <td valign="middle">
    <h2>Test Product</h2>
    <p>This has a short description.</p>
  </td>

Answer 3

Какой браузер? Я скопировал и вставил ваш HTML (добавлены теги html и body) и скопировал ваш CSS (добавлены теги head и style), и вертикальное выравнивание является точным - это не соответствует проблеме на вашей картинке.

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

Answer 4

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

Answer 5

Возможно, стоит попробовать valign на тегах TD. valign = "middle" для всех из них.

Answer 6

Используйте фиксированную ширину для вашей таблицы и каждого тд тега. У вас есть ширина таблицы, установленная на 100%, и фиксированная ширина для первого тега. Второй и третий теги td корректируются на основе содержимого тегов td, чтобы заполнить 100% ширину тега таблицы.