垂直垂直画像とテキストを揃えるしようとしている画像や複数行のテキスト

Question

- 私を揃える：

 
+-------------------------+ -- Viewport 
|   Text text text | 
| +-----+ text text text | 
| |IMAGE| text text text | 
| +-----+ text text text | 
|   text text text | 
+-------------------------+ 

テキストがラップされていない場合、これは、正常に動作します。テキストがビューポート幅よりも広い場合は、それ以上は機能しません。インラインブロック：私は、これは、ディスプレイを設定することによって引き起こされていると思い

<a href="#"> 
    <img style="display: inline-block; vertical-align: middle; margin-right: 8px;" src="images/arrow_black.png" /> 
    <span style="display: inline-block; vertical-align: middle;"> 
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonum eirmod tempor invidunt ut labore et dolore 
    </span> 
</a> 

結果：

 
+---------------------------------------------------------------------+ -- Viewport 
|                  |                
| +-----+                | 
| |IMAGE| text text text text text text text text text text text text | 
| +-----+                |               
|                  | 
+---------------------------------------------------------------------+ 

+-------------------------+ -- Viewport 
| +-----+ Text text text | 
| |IMAGE| text text text | 
| +-----+ text text text | 
| text text text text  | 
+-------------------------+ 

を私は要素を浮上しようとすると、画像は常に一番上にあってもよいが、vertical-ません。テキストの途中でaligend：

<a href="#"> 
     <img style="display: block; vertical-align: middle; margin-right: 8px; float: left;" src="/images/arrow_black.png" /> 
     <span style="display: block; overflow: auto;"> 
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
     </span> 
    </a> 

結果：

 
+-------------------------+ -- Viewport 
| +-----+ Text text text | 
| |IMAGE| text text text | 
| +-----+ text text text | 
|   text text text | 
|   text text text | 
|   text text text | 
+-------------------------+ 

html-tablesまたはcss-table（display：tableとdisplay：table-cell）を使用してこの問題の解決策をいくつか見てきましたが、これはオプションではありません。すべてのタイプのブラウザモバイル）。

それに、私はどんなサイズでも知らない。画像もテキストもだから、私は「マージンまたはパディングソリューション」を使用することはできません。

EDIT：I'veはdemo-fiddle作成（NGLNがところで、作成したものに基づいて：！そのためのおかげで）を探した結果 - 私を示しました。しかし、私はディスプレイを使用せずにこれをアーカイブしようとしています：テーブルセル...任意のアイデア？

Answer 1

イメージの幅とテキストの幅の比率を見積もるには、テキストのスパンにパーセンテージの幅を設定することをおすすめします。

Answer 2

サイズがわからないため、マージン/パディングの回答は使用できません。しかし、イメージを途中まで配置するためにパーセンテージを使用するだけでなく、すべてをdivに分割するのはなぜですか？パーセンテージはでき

#viewport { 
    width:800px; 
    height:500px; 
    border:1px solid #FFF; 
}  

#image { 
    width: 400px; 
    float:left; 
    height:100%; 
    text-align: center; 
} 

img { 
    margin-top:50%; 
} 

#text { 
    width:300px; 
    float:left; 
} 

明らかにすべての幅と高さやしかし、あなたはそれらを処理したい：

<div id="viewport"> 
    <div id="image"> 
     <img src="http://source..." /> 
    </div> 
    <div id="text"> 
     Whatever 
    </div> 
</div> 

そして

は、あなたのCSSには、これを行います。しかし、これはあなたがそれを望む方法を提供するはずです。私はあなたの質問を正しく理解していることを願っています。

Answer 3

this demo fiddleのような意味ですか？

HTML：

<div id="viewport"> 
    <a href="#"> 
     <img src="images/arrow_black.png" alt="" /> 
     <span>Lorem ipsum dolor...</span> 
    </a> 
</div> 

はCSS：

#viewport { 
    background: #bbb; 
    width: 350px; 
    padding: 5px; 
    position: relative; 
} 
#viewport img { 
    position: absolute; 
    top: 50%; 
    margin-top: -30px; /* = image height div 2 */ 
} 
#viewport span { 
    margin-left: 68px; /* = image width + 8 */ 
    display: block;  
} 

Answer 4

これは、私は誇りに思っていないよな方法ですが、それは、JSやフレキシボックスせずにこれをアーカイブするために、私が知っている唯一の方法です。

#viewport { 
 
    width: 350px; 
 
    padding: 5px; 
 
    position: relative; 
 
} 
 

 
#viewport a { 
 
    background: #bbb; 
 
    display: inline-block; 
 
} 
 

 
#viewport img { 
 
    display: block; 
 
} 
 

 
#viewport i, 
 
#viewport span { 
 
    display:table-cell; 
 
    vertical-align:middle; 
 
} 
 

 
/* Using padding to add gutter 
 
between the image and the text*/ 
 
#viewport span { 
 
    padding-left: 15px; 
 
}

<div id="viewport"> 
 
    <a href="#"> 
 
     <i><img src="//www.gravatar.com/avatar/be15533afe64a3939c5201a65a19d7ed/?default=&s=80" alt="" /></i> 
 
     <span>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</span> 
 
    </a> 
 
    
 
    <a href="#"> 
 
     <i><img src="//www.gravatar.com/avatar/be15533afe64a3939c5201a65a19d7ed/?default=&s=80" alt="" /></i> 
 
     <span>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</span> 
 
    </a> 
 
</div>

要素は、より多くの高さを持っているにかかわらず、この方法では、テキストとイメージは常に真ん中に整列されます。