2

画像を水平方向と垂直方向に中央に配置することについて、私のツッツを見つけました。しかし、それは機能していません。私のコードは

#parent {
    position : relative;
    float : left;
    width : 700px;
    height : 400px;
    overflow : hidden;
    background-color: black;
}


#parent img {
    max-height :400px;
    max-width : 700px;
}

画像の高さと幅は動的です。

4

6 に答える 6

8

次のように書きます。

#parent {
    position : relative;
    float : left;
    width : 700px;
    height : 400px;
    overflow : hidden;
    background-color: black;
    text-align:center;
    line-height:400px;
}


#parent img {
    vertical-align:middle;
}

これをチェックしてください http://tinkerbin.com/XYKUzvXu

更新しました

これをチェックしてくださいhttp://tinkerbin.com/GL4GaNfo

于 2012-07-06T10:05:24.440 に答える
2

あなたが持っている必要があります

text-align: center

#parent スタイルで画像を水平に揃えます。記憶が正しければ、親スタイルでこれを設定することもできます。

line-height: 400px;

これにより、画像が垂直方向に整列されます。

于 2012-07-06T09:56:35.883 に答える
1 
#parent {
    position : relative;
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    width : 700px;
    height : 400px;
    overflow : hidden;
    background-color: black;
}


#parent img {
    max-height :400px;
    max-width : 700px;
}
于 2012-07-06T09:57:24.363 に答える
0

nax-width : 700px;のはずの構文エラーがありましたmax-width : 700px;。この CSS をどのように使用しても機能しますが、あなたのものは機能しません。

#parent
{
   position : relative;
    float : left;
    display: table-cell;
    width : 700px;
    height : 400px;
    overflow : hidden;
    background-color: black;
    text-align: center;
    vertical-align: middle;
}
#parent img
{
    max-height :400px;
    max-width : 700px;
}​

ここの例http://jsfiddle.net/ANwmv/

于 2012-07-06T09:56:10.693 に答える
0

display:table-cellとvertical-align:middleと を使用text-align:center

HTML

<div id="parent">
  <img src="http://s3.buysellads.com/1241308/100953-1333587587.jpg
"></div>

CSS

#parent {
    position : relative;
    display:table-cell;
  vertical-align:middle;
    width : 700px;
    height : 400px;
    overflow : hidden;
    background-color: black;
  text-align:center;
}


#parent img {
    max-height :400px;
    max-width : 700px;
}

ライブデモ

http://tinkerbin.com/RDZuJFS7

于 2012-07-06T09:57:50.857 に答える
0

こんにちは、以下のコードを参照して、目的の結果を得ることができますdisplay:table-cell; vertical-align:middle;: -text-align:center;

HTML

 <div id="parent">
      <img src="http://dummy-images.com/abstract/dummy-107x160-RedDots.jpg" />
    </div>

CSS

#parent {
    display:table-cell;
    width : 700px;
    height : 400px;
    background-color: black;
    vertical-align:middle;
    text-align:center;
}


#parent img {
    width : 107px;
    height : 160px;
}

デモを見る:- http://tinkerbin.com/ajsaa856

于 2012-07-06T10:02:31.837 に答える