Как вы центрируете текст и изображение в ячейке таблицы? - PullRequest
Новая
       13

Как вы центрируете текст и изображение в ячейке таблицы?

0 голосов
/ 02 марта 2010

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

Не могли бы вы помочь? 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
    <link href="default.css" rel="stylesheet" type="text/css" />

</head>

<body>

<table border="1" style="width: 100%">
    <tr>
        <td class="style1">Text<img src="PdfLink.jpg" alt="Whatever"/></td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td></td>
        <td>&nbsp;</td>
    </tr>
</table>

</body>

</html>

default.css. Добавьте к этому, как считаете нужным. 

body{

    font-size:12pt;
    }
}

Обновление:

Я забираю некоторые предыдущие комментарии, в том числе говорю, что ответ Эвана сработал.

Следующее сработало. Обратите внимание "*". Ответ Эвана не включал . Что означает ""?

.style1 * { выравнивание по вертикали: среднее; }

Ответы [ 2 ]

1 голос
/ 02 марта 2010

Звездочка означает «любой потомок этого класса»; будьте осторожны, используя его, потому что это означает, что ВСЕ элементы-потомки получат определенный стиль.

Примечание 1. Помните, что в вашем CSS слишком много правильных скобок.

Примечание 2. Кроме того, другой полученный вами ответ не будет работать, если текст больше изображения. Вы не указали размер изображения.

1 голос
/ 02 марта 2010

Потому что вы используете таблицу для форматирования. Просто добавьте .style1 { vertical-align: middle }. Текст должен остаться слева от изображения.

...