Вертикально центрируйте заголовок справа от изображения, используя CSS - PullRequest
Новая
       37

Вертикально центрируйте заголовок справа от изображения, используя CSS

4 голосов
/ 19 ноября 2010

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

PUPPY!!

Ответы [ 3 ]

4 голосов
/ 19 ноября 2010

Vertical-align:middle оба

http://jsfiddle.net/W7b4U/

1 голос
/ 08 марта 2011

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

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

1 голос
/ 19 ноября 2010

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

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

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

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

РЕДАКТИРОВАТЬ: К сожалению, это не может быть сделано с помощью только 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});
});
...