web-dev-qa-db-ja.com

画像と複数行のテキストを垂直方向に揃える

画像とテキストを垂直方向に揃えようとしています。

 + ------------------------- +-ビューポート
 |テキストテキストテキスト| 
 | + ----- +テキストテキストテキスト| 
 | |画像|テキストテキストテキスト| 
 | + ----- +テキストテキストテキスト| 
 |テキストテキストテキスト| 
 + ------------------------- +

テキストが折り返されていなければ、これは問題なく機能します。テキストがビューポート幅よりも広い場合、それは機能しなくなります。これは、display：inline-block：を設定したことが原因だと思います。

<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>

結果：

 + -------------------------------------------- ------------------------- +-ビューポート
 | | 
 | + ----- + | 
 | |画像|テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト| 
 | + ----- + | 
 | | 
 + -------------------------------------------- ------------------------- + 
 
 + ------------- ------------ +-ビューポート
 | + ----- +テキストテキストテキスト| 
 | |画像|テキストテキストテキスト| 
 | + ----- +テキストテキストテキスト| 
 |テキストテキストテキストテキスト| 
 + ------------------------- +

要素をフロートさせようとすると、画像は常に上に表示されますが、テキストの中央に縦に配置されません。

    <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>

結果：

 + ------------------------- +-ビューポート
 | + ----- +テキストテキストテキスト| 
 | |画像|テキストテキストテキスト| 
 | + ----- +テキストテキストテキスト| 
 |テキストテキストテキスト| 
 |テキストテキストテキスト| 
 |テキストテキストテキスト| 
 + ------------------------- +

Html-tablesまたはcss-tables（display：tableおよびdisplay：table-cell）を使用して、この問題の解決策をいくつか見てきましたが、すべての種類のブラウザー（デスクトップおよびモバイル）で動作する必要があるため、これはオプションではありません。 ）。

それに、サイズはわかりません。画像でもテキストでもありません。したがって、「マージンソリューションまたはパディングソリューション」は使用できません。

[〜＃〜]編集[〜＃〜]：私は デモフィドル を作成しました（1つに基づいて） NGLNが作成しました、ところで：それをありがとう！）それは私が探している結果を示しています。しかし、私はdisplayを使用せずにこれをアーカイブしようとしています：table-cell ...何かアイデアはありますか？

htmlcssimagemultilinevertical-alignment
27
bceo

このデモフィドルのような意味ですか？

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;    
}
9
NGLN

これは私が誇りに思っていない方法ですが、jsやflexboxなしでこれをアーカイブすることを私が知っている唯一の方法です。

#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>

このように、どの要素の高さが高くても、テキストと画像は常に中央に配置されます。

5
Daniel Perez Malagon

画像幅とテキスト幅の比率を見積もることができる場合は、テキストスパンにパーセンテージ幅を設定することをお勧めします。

0
asteig

サイズがわからないため、マージン/パディングの回答を使用できないとおっしゃいました。ただし、パーセンテージを使用して画像を半分下に置き、すべてをdivに分割してみませんか？

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

そして、CSSで次のようにします。

#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;
}

明らかに、すべての幅と高さはパーセンテージにすることができますが、どのように処理したいかもしれません。ただし、これにより、希望どおりのレンダリングが可能になります。私があなたの質問を正しく理解していることを願っています。

0
rybo