1

画像をdivの垂直方向および水平方向に中央揃えにするにはどうすればよいですか。

画像のサイズが一定ではないため、高さやパディングを固定せずにこれを取得する必要があるため、すべての画像に柔軟に対応する必要があります。

ここに私の道があります http://jsfiddle.net/yHdAx/2/

4

6 に答える 6

2

画像を中央揃えにするには、ディスプレイをブロックに設定し、左右の余白を自動に設定する必要があります。また、新しいコード例では、上下の余白を使用してこれを行いました。これを機能させるために必要なコードは次のとおりです。

CSS

.test {
    background-color:#999;
    height:60%;
    display:block;
    vertical-align:middle;
    padding-top: 25%;
    padding-botton: 25%;
}

.test img {
    max-width:50%;
    vertical-align: ;
    display: block;
    margin: auto auto auto auto;
}

HTML

<div style="height:800px; background-color:#CCC">
    <div class="test">
        <img src="http://static.clickbd.com/global/classified/item_img/607724_0_original.jpg" />
    </div>
</div>
于 2012-07-02T08:47:28.387 に答える
1

ちょっと今、あなたはtable-cellこのようにあなたのdivのプロパティに慣れることができます

ライブデモ http://jsfiddle.net/yHdAx/3/

HTML

 <div style="height:800px; background-color:#CCC">
<div class="test">
<img src="http://static.clickbd.com/global/classified/item_img/607724_0_original.jpg" />
</div>

CSS

  .test{
background-color:red;
height:600px; display:table-cell; vertical-align:middle;
    text-align:center;
}
.test img{
max-width:50%;

}

詳細http://www.brunildo.org/test/img_center.html

于 2012-07-02T08:49:17.323 に答える
0

1つのdivだけで遊んでみました

div  {
    display:table-cell;
    background:red;
    width:500px;
    height:500px;
    vertical-align:middle;
    text-align:center;
}

これがあなたにも役立つことを願っています：-http：//jsbin.com/ihunuq/3/edit

于 2012-07-02T09:32:34.373 に答える
0

position: absolute を使用できます。そのようなもの：jsfiddle。

.test{
  background-color:#999;
  height:60%;
  width: 100%;
  position: relative;
}
.test img{
  max-width:50%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
于 2012-07-02T13:22:27.780 に答える
0

含まれている div に高さを設定しないと、デザインが壊れますか?

画像を中央に配置するには、使用するだけです

.test img {
    display:block; 
    width:25%; 
    margin:0 auto;
}
于 2012-07-02T09:11:31.203 に答える