Вот jsFiddle. Как можно вертикально центрировать img и div внутри td, без использования абсолютных значений (т. Е. px))?Вертикальное выравнивание нескольких объектов в ячейке таблицы
Чистое решение для CSS оценивается. Благодарю.
Как это ?:
<div style="width:100%; height:60px; position:relative; overflow:visible;">
<table style="width:400px; table-layout:fixed" cellspacing="0" cellpadding="0">
<tr>
<td style="vertical-align: middle; width:200px;">
<img align="left" src="http://upload.wikimedia.org/wikipedia/donate/c/c0/Information-icon.png" style="float:left;margin-top:50px;" />
<div style="text-align:center; float:left; width:150px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat</div>
</td>
</tr>
</table>
</div>
Извините, но я не хочу устанавливать любые размеры, например 'width: 150px'. Является ли это возможным? –
Возможно, но не совсем. Divs предназначены для растягивания, чтобы заполнить всю доступную ширину, если вы не обозначили их ширину. Это вызовет длинный текст внутри этого div, чтобы сначала растянуть div до его появления на новой строке с изображения, чем до полного заполнения родительской строки, и только после этого текстовая строка сломается. Возможно, что вы хотите достичь желаемого макета - это вложить в таблицу еще одну таблицу? – invertedSpear
Если вы не против установки значок информации в качестве фона для TD, я хотел бы попробовать это: jsFiddle
td {
background: url('http://upload.wikimedia.org/wikipedia/donate/c/c0/Information-icon.png') no-repeat left center;
padding-left: 20px;
}
Мы знаем, что ширина значка 20px, поэтому, установив фоновое изображение на no-repeat и применив padding-left: 20px к TD, правильно замаскирует его и не перекрывается. И, установив фоновое положение left center, оно останется вертикально по центру.
вам нужно будет установить ширину на div, иначе она будет нажата под img – 97ldave