0

line-height, vertical-align メソッドを使用して、画像を div 内の中央に配置しようとしています。例、ここでの質問、およびその他の修正を見ると、それらはすべて提案し、これが機能することを示しています。しかし、それは私にとってはうまくいきません。

基本構造

<div class="photo_container">
    <img alt="" src="photos/1.jpg" class="thumbnail" />
</div>

CSS

div.photo_container
{
    width: 160px;
    height: 160px;
    padding: 10px;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
    background-color: White;
    box-shadow: 0px 0px 5px #AAA;
    text-align: center;
    line-height: 160px;
}
img.thumbnail
{
    vertical-align: middle;   
}

基本的に、ご覧のようにコンテナーは常に 160 ピクセルの高さですが、内部の画像は高さ 100 ピクセル程度になる可能性があります。この場合、コンテナーの上部と下部に 30 ピクセルの間隔を置き、画像を中央に垂直に配置する必要があります。

私は何が欠けていますか？

答えた

それはDOCTYPEの問題であることが判明しました。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML 5 doctype を使用する必要があった場合

<!DOCTYPE html>

4

4 に答える 4

1

Doctype 宣言:<!doctype html>

(または、代わりに:有効なコード)

于 2012-05-10T02:36:16.200 に答える
1

あなたのコードはクロムで私のために働くようです..以下のフィドル。足りないものはありますか？

編集:存在しない画像に幅/高さを追加しました。

JSフィドル

于 2012-05-10T02:34:07.597 に答える
0

これは多かれ少なかれ私にはうまくいくようです

JSFiddleで見る

CSS

div.photo_container
{
    width: 160px;
    height: 160px;
    padding: 10px;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
    background-color: White;
    box-shadow: 0px 0px 5px #AAA;
    text-align: center;
    line-height: 160px;
    border: 1px solid red;
}
img.thumbnail
{
    vertical-align: middle;   
}​

HTML

<div class="photo_container">
    <img alt="" src="http://www.totalesl.com/images/icon/funny-icon.jpg" class="thumbnail" />
</div>​
于 2012-05-10T02:37:29.617 に答える
0

http://css-tricks.com/snippets/css/absolute-center-vertical-horizo​​ntal-an-image/

これは、その方法を説明する必要があります。

于 2012-05-10T02:29:59.467 に答える