Как делают меня вертикальный центральный текст рядом с изображением в html/css?
Исходный код платформы Java находится в свободном доступе. Вот выдержка:
public class ArrayList extends AbstractList
implements List, RandomAccess, Cloneable, java.io.Serializable
{
/**
* The array buffer into which the elements of the ArrayList are stored.
* The capacity of the ArrayList is the length of this array buffer.
*/
private transient E[] elementData;
.
.
.
}
6 ответов
Я всегда прибегаю к этому решению . Не слишком хакерский и выполняет свою работу.
РЕДАКТИРОВАТЬ: Я должен указать, что вы можете добиться желаемого эффекта с помощью следующего кода (простите встроенные стили; они должны быть на отдельном листе). Кажется, что выравнивание изображения по умолчанию (базовая линия) приведет к выравниванию текста по базовой линии; установка среднего значения позволяет визуализировать все хорошо, по крайней мере, в FireFox 3.
Вот текст. Исключает ли «чистый HTML / CSS» использование таблиц? Потому что они легко сделают то, что вы хотите:
<table>
<tr>
<td valign="top"><img src="myImage.jpg" alt="" /></td>
<td valign="middle">This is my text!</td>
</tr>
</table>
Назовите меня как хотите, но это работает (и работает в старых, дрянных браузерах).
Есть способы: Используйте атрибут тега изображения align = "absmiddle" или найдите изображение и текст в контейнере DIV или TD в таблице и используйте
style="vertical-align:middle"
Один из основных способов, который приходит на ум, - это поместить элемент в таблицу и иметь две ячейки, одну с текстом, другую с изображением, и использовать style = "valign: center" с тегами.
Есть несколько вариантов:
- Вы можете использовать line-height и убедиться, что он высокий, как содержащий элемент
- Используйте display: table-cell и vertical align: middle
Я предпочитаю первый вариант, если это короткий промежуток, или последний в противном случае.