データベースからロードする.netページにイメージを表示したい（その量は異なる可能性があります）。すべての画像の幅と高さがそれぞれ130pxと60pxまで異なります。私は画像を130pxの固定幅と60pxの固定高さのコンテナ要素に入れたいと思います。画像は、縦と横の中央に配置する必要があります。可能であれば、容器要素を水平に整列させる必要があります。
div（フロート付き）とスパンを試しました。 divでは、固定サイズが得られますが、イメージを中央に配置することはできません。スパンでは、私はセンターすることができますが、サイズを設定することはできません。 divにspanを入れると、divのように振る舞うように見えます（センタリングは無視されます）。固定サイズ（CSS、HTML）のコンテナ要素の中心イメージ
あなたはそれがhttp://jsfiddle.net/km5dk/8/
に取り組む見ることができますしかし、私はあなたがこのような何かを検索すると思います。
### HTML ###
<div id="container">
<div class="image-container">
<img src="#" alt="A image" />
</div>
</div>
### CSS ###
#container {
width: 130px;
height: 60px;
display: table;
background-color: #ccc;
}
#container .image-container {
text-align: center;
vertical-align: middle;
display: table-cell;
}
#container .image-container img {
max-width: 160px;
max-height: 60px;
}
div内にIMGタグがある場合は、margin：0px autoをdiv CSSに設定します。垂直ため
：
表示：表セル。縦線：中央;
それは画像を垂直方向にセンタリングしません。 –
ディスプレイ：table-cell;縦線：中央; – user92254225
私はまだ自分自身だけで約2週間前にHTML/CSSを始め学んでいるが、これは偉大な動作しているようですが、クリックし、説明ボックス、タイトルボックス、および中央に画像をホバー持っています。
CSSコードを別のスタイルシートに配置することもできます。私はそれらをポストのために一緒に保つと思った。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color:black;
color:white;
}
#container
{
width:18em;
height:18em;
}
#title-image
{
background-image:url('http://www.gravatar.com/avatar/cd1954c9caf7ffc02ab18137967c4bc9?s=32&d=identicon&r=PG');
background-repeat:no-repeat;
background-position:center;
border:1px solid RGBa(255, 255, 255, 0.1);
background-color:RGBa(127, 127, 127, 0.1);
color:#CFCFCF;
width:10em;
height:10em;
margin-left: 3.9375em;
margin-right: 4em;
text-align:center;
display: block;
}
#title-image:hover
{
border:1px solid RGBa(255, 255, 255, 0.15);
background-color:RGBa(127, 127, 127, 0.15);
color:#FFFFFF;
}
#description
{
width: 18em;
border:1px solid RGBa(255, 255, 255, 0.03);
background-color:RGBa(127, 127, 127, 0.03);
text-align:center;
display: block;
}
</style>
</head>
<body>
<div id="container">
<a href="google.com" id="title-image">This is your Title?</a>
<p id="description">Your description<br>Can go here.</p>
</div>
</body>
</html>
あなたは個々のコンテナ自体にインラインスタイルとして、あなたのコンテナのCSSルール上background-size、およびbackground-image: url(this_image.jpg);を使用することができます（意図的なしゃれを言い訳！）箱の少し外側を考えます。 これは、あなたのためのすべてのスケーリングをより小さなパッケージで処理します。
設定をbackground-size: cover;に設定すると、最小寸法が一致するように画像の縮尺が調整されます（ただし、クロッピングが発生することがあります）。background-size: contain;は画像全体が確実にフィットします。
それは別のオプション...
ダニー
使用ポジショニングです。以下は私のために働いた：
div{
display:block;
overflow:hidden;
width: 70px;
height: 70px;
position: relative;
}
div img{
min-width: 70px;
min-height: 70px;
max-width: 250%;
max-height: 250%;
top: -50%;
left: -50%;
bottom: -50%;
right: -50%;
position: absolute;
}
ブートストラップ3を使用すると、画像
<img class="img-responsive center-block" src="my_image.png" />
メイク画像中心
.image-container {
width: 500px;
height: 500px;
position: relative;
}
.image-container img {
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
margin: auto auto;
}
自動を中央にIMG応答性中央ブロックのクラスを追加することができますdivコンテナに合わせて画像のサイズを変更する
.image-container img {
max-height: 100%;
max-width: 100%;
}
良い解決策ですが、Internet Explorer（ただしFirefoxとChrome）では動作しません。 IEでは、垂直整列は行われません。 – AGuyCalledGerald
Internet Expolore 8以降では、縦に整列しています。この例は、IE7では、過去数年の技術の多くとして機能していません。 IE8以降で動作するはずです。 –
ええ、私はIE 9でそれを試しました、それはあなたのために働いたのですか？ – AGuyCalledGerald