7

このようなdiv内に画像があります

<div><img /><div>

画像は固定サイズのない動的です。div のサイズは です200px by 200px。画像サイズは事前にわかりません。画像のサイズが より大きい場合は、(つまり、 )190px by 190pxに設定します。これらのニーズが満たされた状態で画像を中央に配置するにはどうすればよいですか? Internet Explorer 7 でも動作するソリューションが必要です。190px by 190pxmax-width:190pxmax-height:190px

こことここの解決策は私の問題には適用できません。

  1. 画像が 200 ピクセル未満になるかどうかは定かではありません。

  2. 横並びも欲しい。

  3. Internet Explorer 7 はサポートされていません。

(スタック オーバーフローで同じことについていくつか質問されていますが、私のシナリオは異なるため、この特定の問題には当てはまりません。)

4

4 に答える 4

6

div解決策は、をテーブルに変更することです。通常、ポジショニングにテーブルを使用するべきではありませんが、標準に準拠していない古いブラウザの場合は、それが唯一の選択肢である場合があります。 ここでのデモンストレーション。ちなみに、これはInternetExplorer6でも機能します。

コード：

CSS

#theDiv
{
    width: 200px;
    height: 200px;
    text-align: center;
    vertical-align: middle;
}
#theImg
{
    max-width: 190px;
    max-height: 190px;
}​

HTML

<table id="theDiv" style="border: solid 1px #000">
    <tr>
        <td>
    <img id="theImg" src="http://cdn1.sbnation.com/community_logos/9156/gangreen-small.jpg" />
        </td>
    </tr>
</table>

マークアップを実際のテーブルに変更する代わりにCSSを使用する更新は次のとおりです。

#theDiv
{
    display: table;
    width: 200px;
    height: 200px;
    text-align: center;
    vertical-align: middle;
}
#theImg
{
    max-width: 190px;
    max-height: 190px;
}

.tr {
  display: table-row;
}
.td { 
  display: table-cell;
  vertical-align: middle;
}

<div id="theDiv" style="border: solid 1px #000">
    <div class="tr">
        <div class="td">
    <img id="theImg" src="http://lorempixel.com/100/100/" />
        </div>
    </div>
</div>
于 2012-07-01T19:30:47.830 に答える
2

このフィドルを参照してください：http：//jsfiddle.net/ANwmv/

http://www.brunildo.org/test/img_center.htmlで提案されているセンタリングの解決策

<style type="text/css">
.wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 200px;
    height: 200px;
    border: 1px solid red;
}
.wraptocenter img { max-width: 190px; max-height: 190px; }
.wraptocenter * {
    vertical-align: middle;
}
/*\*//*/
.wraptocenter {
    display: block;
}
.wraptocenter span {
    display: inline-block;
    height: 100%;
    width: 1px;
}
/**/
</style>
<!--[if lt IE 8]><style>
.wraptocenter span {
    display: inline-block;
    height: 100%;
}
</style><![endif]-->

HTML：

<div class="wraptocenter"><span></span><img src="http://lorempixel.com/100/100" alt="..."></div>
于 2012-07-01T19:33:45.300 に答える
0

親に、それ自体の高さと同等の行の高さと、中央のtext-alignプロパティを与えます。画像に垂直方向の配置プロパティ middle を指定して、行の高さの中央に配置します。

HTML: 

    <html>
        <body>
            <div>
                <img src="http://www.waleoyediran.com/wp-content/uploads/2011/04/stackoverflow.png"/>                
            </div>
        </body>   
    </html>

CSS:

div, img {
 border: 1px solid black;  
}

div {
  width: 200px;
  height: 200px;
  text-align: center;
  line-height: 200px;
}

img {
  max-width: 190px;
  max-height: 190px;
  vertical-align: middle;    
}

JS フィドルの例

于 2012-07-01T23:17:17.093 に答える
-1

あなたはこれを行うことができます：

<div style="text-align:center;vertical-align:middle;"> 
    <img style="margin:0 auto" /> 
</div>
于 2012-07-01T18:58:19.473 に答える