1

私はかなり簡単なはずの何かを試していますが、それを作る方法がわかりません。

私はこのようなhtmlソースを持っています：

<div class="product">
  <img src="product123.png" />
</div>`

そしていくつかのCSS：

.product {
    width: 460px;
    height: 460px;
}

.product img {
      margin: auto;
      display: block;
}

私の画像は水平方向にうまく整列していますが、垂直方向には整列していません。いくつかの機能を試してみましposition: relative; / bottom: 0;たが、何も変わりませんでした...

アイデアの人はいますか？

ご協力ありがとうございました ！

PS：このソリューションセンター<IMG />はCSSを使用した<DIV>内にありますが、HTMLをこのように維持したいので、「自分の」方法でそれを実行できないのは信じられないようです。

4

4 に答える 4

7

これを試してください-http://jsfiddle.net/tG9UK/

.product {
    width: 460px;
    height: 460px;

    display: table-cell;
    vertical-align: middle;
}
于 2012-08-10T16:33:31.613 に答える
0

垂直方向と水平方向の両方を中央に配置する場合は、display：table-cellをdivに適用し、vertical-alignを使用できるはずです。

.product {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 460px;
    height: 460px;
}
.product img {
    margin: auto;
    display: block;
}
于 2012-08-10T16:37:14.603 に答える
0 
.product {
    width: 460px;
    height: 460px;
    line-height:460px;
    text-align:center;
}

http://jsfiddle.net/EHTeL/1/

于 2012-08-10T16:37:49.003 に答える
0

画像のサイズが静的な場合は、このようなものが適しています

.product img {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 300px;
   height: 300px;
   margin-top: -150px; /* Half the height */
   margin-left: -150px; /* Half the width */
}
于 2012-08-10T16:38:50.343 に答える