4

私の HTML コードは次のようになります。

<div class="ctn">
    <img src="some-img.jpg"/>
</div>

はctn固定サイズ、たとえば 150*150 である必要があります。

しかし、IMG のサイズは大きくても小さくてもかまいません: 200*50、50*200、50*50 など。

画像を中央に合わせるにはどうすればよいdivですか? 画像の比率は変更しないでください。

====UPDATE==== はい、堀と縦中心の両方が必要です。

4

8 に答える 8

15

css を追加して、画像を水平方向と垂直方向の両方で中央揃えにすることができます。

DIV.ctn {
    min-height: 150px;
    min-width: 150px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    display: table-cell;
    vertical-align: middle }

...

<div class="ctn">
    <img src="some-img.jpg"/>
</div>

編集: 詳細については、http ://www.w3.org/Style/Examples/007/center.html を参照してください。

于 2013-05-29T15:40:16.833 に答える
5

次のことを試してください。

text-align: center;    
display: table-cell;
vertical-align: middle;

デモ

于 2013-05-29T15:37:35.467 に答える
1

EDIT：再読み込み、画像サイズを固定したい。

div.cnt {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    min-height: 150px;
    min-width: 150px;
}
于 2013-05-29T15:40:45.717 に答える
0

cssで好きな人にIDを付けてください→

#foto{
    margin-left:180px;
}
于 2019-08-27T13:17:26.777 に答える
-4

set style="margin-let:auto; margin:right:auto"

また、画像に幅を指定しないと機能しません

于 2013-05-29T15:38:29.020 に答える