css - CSSを使用して、画像の右側にキャプションを垂直方向に中央揃えします

Question

私はCSSでこのレイアウトを実現しようとしています（テーブルなしで、私は推測します。何でも）。何か案は？

Answer 1

Vertical-align:middle両方とも

http://jsfiddle.net/W7b4U/

Answer 2

できることはいくつかありますが、それは問題の詳細によって異なります。いくつかの質問：

• 写真は常に同じ高さですか？
• テキストは常に1行だけですか、それとも複数行で折り返される可能性がありますか？
• テキストはレベル要素ですかblock？inline

写真が常に同じ高さで、テキストが1行しかない場合は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});
});

Answer 3

テーブルとセルのCSS属性を確認します（特に、内容が垂直方向と水平方向の中央に配置されている単一のセルを持つテーブルの基本的な場合）。

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