css - 画像をdivの中央に配置するには?

Question

1000x1000px の画像を 320x460px の小さな div に overflow:auto で表示しているので、div 内で画像をスクロールできます。ページを読み込むと、画像が画像の左上隅から表示されますが、代わりに画像を中央に表示するにはどうすればよいでしょうか?

ご意見ありがとうございます。

これがコードです。私のインデックスファイルでは、次のようにページをロードします。

$('#kartamap').load('imagemap.html', function() {
                    alert(".load has loaded");  
                    imagescroll();                                                                     

                           });

そしてこれが私のページです。

<div id="themap">

 <div id="imagediven" style="height:460px; width:320px;">

  <img src="image.png" width="1000px" height="1000px"/>

  </div>

<style>
#imagediven {
    overflow:auto;
    height:460px;
    width:320px;
    position:relative;
}

</style>

    <script type="text/javascript">

    function imagescroll(){
    var element = document.getElementById('imagediven'), /* This is your div */
            scrollHeight = element.scrollHeight,
            scrollWidth = element.scrollWidth;
        clientHeight =$(window).height();
            clientWidth = $(window).width();

        alert(scrollHeight);//this is not displaying the image height?
        alert(clientHeight);//this is getting a value off the screen

    element.scrollTop = (scrollHeight - clientHeight) / 2;
    element.scrollLeft = (scrollWidth - clientWidth) / 2;
    }

    </script>

</div>

score 1 · Accepted Answer

幅 320 ピクセル、高さ 460 ピクセルをコンテナー div に割り当てることができます。次に、CSS で画像に 25% のマージンを適用します。画像がすべての辺から中央に配置されます。

ここにHTMLがあります

<div id="img">
 <img src="Chrysanthemum.jpg" />
</div>

ここにCSSがあります

div#img
{
width:320px;
height:460px;
overflow:scroll;

}
div#img img{margin:0 auto;padding:0;margin:25%;}

score 0 · Accepted Answer

divを中央にスクロールしようとしていると思いますimg。

Javascript プロパティを使用する必要がありscrollTop、scrollLeft

中央にスクロールするには、値を次のように設定する必要があります

scrollTop = (scrollHeight - clientHeight) / 2;
scrollLeft = (scrollWidth - clientWidth) / 2;

JS:

var element = document.getElementById('container'); /* This is your div */

element.scrollTop = (element.scrollHeight - element.clientHeight) / 2;
element.scrollLeft = (element.scrollWidth - element.clientWidth) / 2;

このJSFiddleを確認してください

score 0 · Accepted Answer

0

div img
{
margin:auto;
width:320px;
height:460px;
vertical-align:middle;
}

于 2013-09-26T09:12:22.390 に答える

score 0 · Accepted Answer

プロパティを確認しbackground-positionます。

background-size: coverdiv に適合させるために使用 (または含む) することもできます。

score 0 · Accepted Answer

0

試してみませんか：

text-align:center;

于 2013-09-26T09:13:01.830 に答える

css - 画像をdivの中央に配置するには?

8 に答える 8

Related

Reference