2

画像を div に挿入しようとしていますが、中央に配置されていません。

手伝ってくれませんか ！

<div style="width:200px; height:200px; flaot:left; margin:0; padding:0;"><img src="image.png" width="100" height="100" /></div>
4

5 に答える 5

0 
<img style="vertical-align:middle;" src="image.png" width="100" height="100" />
于 2012-06-28T10:23:37.923 に答える
0

私は通常これを使用しました、そしてそれは働きます...

<div style="width:200px; height:200px; margin:0; padding:0; display: table-cell; vertical-align: middle;"><img src="image.png" width="100" height="100" /></div>
于 2012-06-28T10:47:49.500 に答える
0

関連する高さがわかっている場合は、負のマージンを使用してこれを実現できます。

<div style="width:200px; height:200px; float:left; margin:0; padding:0;"><img src="image.png" width="100px" height="100px" style="margin-top: -50px" /></div>
于 2012-06-28T10:27:12.177 に答える
0

すべてのサイズ (div とimg ) がわかっている場合は、次のようなものを使用できます。

CSS:

#content{
    width: 200px;
    height: 200px;
    margin: 0;
    padding: 0;
    float: left;
    line-height: 200px;
}

#content img{
    vertical-align: middle;      
}
​

HTML:

<div id="content">
    <img src="http://placekitten.com/120/120" width="100" height="100" />
</div>​

またはもう 1 つのバージョン: tinkerbin

CSS:

#content{
    width: 200px;
    height: 200px;
    margin: 0;
    padding: 0;
    float: left;
    position: relative;
}

#content img{
   position: relative;
   top: 50%;
   margin-top: -50px;
}
于 2012-06-28T10:41:38.117 に答える
-1

CSSDispaly:table-cellでプロパティと削除 float:left;に慣れました

このように

CSS

.parent{
  width:200px; 
  height:200px;
 text-align:center;
  display:table-cell;
  vertical-align:middle;
  margin:0; padding:0;
  background:red;
}

html

<div class="parent">
  <img src="http://outgrow.me/wp-content/uploads/2012/06/ramos-305x203.jpg" width="100px" height="100px" />
</div>

ライブデモhttp://tinkerbin.com/4IU9UvR9

于 2012-06-28T10:40:52.483 に答える