32

div内に画像とテキストがあり、CSSを使用して画像とテキストをdivの垂直方向の中央に配置したいと思います。問題は、テキストの行数がわからないことですが、テキストと画像は常に中央に配置する必要があります。たとえば、テキストが1行しかない場合、divは次のようになります。

####################################
#  _______                         #
# |       |                        #
# |       |                        #
# | IMAGE |    text text text      #
# |       |                        #
# |_______|                        #
#                                  #
####################################

最終的に行数が増えたり、テキストの高さが画像の高さよりも大きくなったりした場合は、次のように画像を揃える必要があります。

####################################
#                                  #
#              text text text      #
#  _______     text text text      #
# |       |    text text text      #
# |       |    text text text      #
# | IMAGE |    text text text      #
# |       |    text text text      #
# |_______|    text text text      #
#              text text text      #
#              text text text      #
#                                  #
####################################

この効果を得るのに苦労していますが、JavaScriptを使用せずにこれを行う方法はありますか？

Obs。私が参照しているdivの親divにはposition：relativeがあるため、別の問題があります。

4

2 に答える 2

44

画像とテキストの両方にvertical-align：middleを指定します-テキストは、display：inlineでもある要素に含まれている必要があります。したがって、次のようなマークアップ：

<div>
  <span><img src="blah.jpg" /></span>
  <span>text text text</span>
</div>

div {
  display: table;
}

img {
  vertical-align: middle;
  display: table-cell;
}
span {
  vertical-align: middle;
  display: table-cell;
}

動作するはずです。これがデモンストレーションするjsfiddleです（すべてがコンテナ内で垂直に整列していることを示すために編集されたフィドル）。

編集：必要な動作を得るには、追加の表示プロパティを使用することをお勧めします-コンテナーにはテーブル、含まれている要素にはテーブルセル。フィドルリンクが変更されて更新されました。

編集：それを機能させるために私が考えることができる唯一の方法は、画像を別のインラインコンテナ（この場合はスパン）でラップすることでした。実演するためにフィドルを更新しました。

于 2012-11-16T00:10:20.060 に答える
4

これを試してみてください。例はこちらです。

CSS：

div.parent{ 
    border:solid black 1px;
    display:table;
    padding:5px; 
    width:100%;
    margin:5px 0; /* you can change/remove margin */
}
div.text{ 
    vertical-align:middle;
    display:table-cell;
    text-align:justify;
}
div.parent .img{
    vertical-align:middle;
    display:table-cell;
    padding-right:5px;
    width:50px; /* you can change width */
}
div.img img{ 
    width:100%;
    height:50px; /* you can change height */
    vertical-align:middle;
}

</ p>

HTML：

<div class="parent">
    <div class="img"><img src="http://example.com.img1.png" /></div>
    <div class="text">Some Text Some.</div>
</div>
于 2012-11-16T01:01:06.527 に答える