8

水平方向と垂直方向の両方で中央に配置された画像があります

#logo01{
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-146px;  // half of height
    margin-left:-229px;  // half of width
    cursor:pointer;
}

レスポンシブ デザインが必要になったので、次のようにします。

#logo01{
    max-width:45%;
    max-height:45%;
}

動作しますが、位置が失われます。画像を中央に配置し、同時にレスポンシブにするにはどうすればよいですか?

4

8 に答える 8

13

これは汚い方法です：

JSFiddle

<div class="shadow"><img class="logo" src="http://placehold.it/1000x1000" /></div>

div.shadow {
    position:absolute;
    max-width:45%;
    max-height:45%;
    top:50%;
    left:50%;
    overflow:visible;
}
img.logo {
    position:relative;
    max-width:100%;
    max-height:100%;
    margin-top:-50%;
    margin-left:-50%;
}

トリックはdiv.shadow「ディメンションホルダー」として使用することです。そのため、パーセンテージが機能します。

シャドウdivにはまだスペースがあり、マウスがその下にあるものを指すことができないため、ダーティと呼びます。それを回避するためにポインターイベントを使用できますが、IEは取り残され、画像自体もポインタブルになりません。

于 2013-08-06T10:07:38.443 に答える
2

これを試して

http://jsfiddle.net/hAH6u/2/

#logo01{
    position:absolute;
    top:50%;
    left:50%;   
    cursor:pointer;
    max-width:45%;
    max-height:45%;
    display:table;
}
于 2013-08-06T09:41:53.230 に答える
1

この解決策はうまくいくかもしれません：

img {
        max-height: 100%;
        max-width: 90%;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
      }

于 2021-02-16T05:44:31.903 に答える
1

プロパティを使用しdisplay:tableてこれを実現できます。display:table-cell

HTML:

<div id='logo_container'>
    <h1 id='logo'><img src = 'http://s18.postimg.org/rwpoh1vo9/forbidden.jpg' alt = 'Logo'/></h1>
</div>

CSS

#logo_container {
    display:table;
    height:100px;
    width:100px;
    margin:0 auto;   
    text-align:center;
    border:1px solid #333;
}

#logo {
    display:table-cell;
    vertical-align:middle;

}
#logo img {
    max-height:80%;
    max-width:80%;
}

これがフィドルです：http://jsfiddle.net/Qe2vG/

画像が垂直方向に中央に配置されていることがわかります。また、レスポンシブ スタイルの場合は、heightとのwidth値を変更するだけです。#logo_container

于 2013-08-06T09:53:09.207 に答える