Вертикально выделите заголовок справа от изображения с помощью CSS

Я пытаюсь достичь этого макета с помощью CSS (без таблиц, я думаю, что бы ни было). Есть идеи?Вертикально выделите заголовок справа от изображения с помощью CSS

PUPPY!!

источник

2010-11-19 Tom Lehman

Я почти хотел понижающее голосование этого вопроса для использования Comic Sans. :) http://bancomicsans.com/main/ – Robusto

да, но я думаю, что это делается с использованием одного из этих инструментов каркаса .. все еще .. соблазнительно. – Hamish

Я сделал это в Balsamiq (и это классная доска, а не Comic Sans) –

Там несколько вещей, которые вы можете сделать, но это зависит от специфики задачи. Несколько вопросов:

Является ли фото всегда одинаковой высоты?
Есть ли только одна строка текста или может быть несколько строк, которые обертываются?
Является ли текст a block или inline элементом уровня?

Если фотография всегда такие же высоты, и есть только одна строки текста, вы можете установить line-height текст равного размера фотографии, а затем установить фотографию в float:left.

Если может быть несколько строк текста, вам может потребоваться использовать элемент inline-block и вычислить верхнее поле с помощью javascript.

EDIT: К сожалению, это невозможно сделать с использованием только CSS, поскольку на элементах уровня блока не допускается вертикальное центрирование. Вот пример, который будет работать с любой длиной текста в div вместе с любым размером фото: http://jsfiddle.net/W7b4U/39/

HTML

<img src="http://placehold.it/100x150"> 
<div class="align">align this align this align this align this align this align this align this align this align this align this align this align this align this align this align this </div>

CSS

img {float: left;}

Javascript/JQuery

$(document).ready(function() { 
    var $text = $('.align'); 
    var $img = $('img'); 
    var margin = ($img.outerHeight() - $text.outerHeight())/2; 
    var textPadding = 10; 
    $text.css({marginTop: margin, marginLeft: $img.outerWidth() + textPadding}); 
});

источник

2010-11-19 00:55:33 markquezada

Фото не всегда одинаковой высоты; может быть несколько завернутых линий; текст может быть как блочным, так и встроенным (в зависимости от контекста) –

Проверьте приведенный выше код. Не уверен, что вы знакомы с jQuery или нет, но я попытался сделать это легко. В основном он просто вычисляет маржу, необходимую для центрирования текста при загрузке страницы. Не оптимальный, но он работает. – markquezada

Ницца: это правильное поведение. Стоит ли использовать JS для этого? Есть ли версия pure-css, которая работает на IE7 +/IE8 +? Могу ли я достичь этого с помощью элемента встроенного блока? –

Vertical-align:middle как

http://jsfiddle.net/W7b4U/

источник

2010-11-19 00:48:48

Это работает так долго, что они являются элементами уровня 'inline', и текст не будет длиннее одной строки. – markquezada

Каковы они в соответствии с его примером :) –

Мне кажется, что в этом случае вам нужно только вертикальное выравнивание - вертикальное выравнивание ничего не делает для диапазона – stephenmurdoch

Заканчивать стол и клеток атрибуты CSS (особенно элементарный случай таблицы с одной ячейки, содержимое центрируется по вертикали и по горизонтали).

http://www.w3.org/TR/CSS2/tables.html#img-cell-align

источник

2011-03-08 20:23:44

Вертикально выделите заголовок справа от изображения с помощью CSS

ответ

Смежные вопросы