1

HTML と CSS ( jsfiddle ) を使用した中央揃えのコンテンツの簡単な例があります。スクリーンショットは以下のとおりです。

ズームされていないコンテンツ

HTML:

<body class="" lang="en-US">
    <div class="wrapper">
        Some stuff
    </div>
</body>

CSS:

html 
{
    background: lightgray; /* Background color of whole window */
    border: 2px solid orange; /* Debug */
    width: 20em; /* The width of the content */
    margin: 2em auto;
}

body
{
    border: 2px solid purple;
}

.wrapper
{
    background: lightgray; /* Background color of whole window */
    border: 2px solid orange; /* Debug */
}

ブラウザのズームを使用してズームインすると、ズームインしてもコンテンツが左側に残ります。

ズームされたコンテンツ

私が望んでいるのは、ズームするとウィンドウの中央に表示されるコンテンツです。

望ましいズーム結果

CSS を使用してこれを行う簡単な方法はありますか。可能であれば、jqueryやその他の方法を使用したくありません。

@Mr Lister が指摘するように更新します。this "problem" has nothing top do with zoom. The very same thing happens if the user makes the window narrower until the horizontal scrollbar appears. Are you saying you want the scrollbar to automatically go to the center then too? That would require Javascript

私はそれを望んでいないと思います。そこからのユーザー エクスペリエンスは少し奇妙に思えるかもしれません。ページの他のセクションに移動できないように、常に中央に配置することを強制したくありません。水平スクロールバーが最初に表示されたときと、その後のズームインでは、中央に置いておいてください。ユーザーがズーム中にスクロールバーの位置を変更した場合、その後のズームで中心に合わせる必要はありません。これは、最初のスクロールバー表示のためだけのものでした。うまくいけば、それは理にかなっています。それが正しいか間違っているかは議論の余地がありますが、これが私の望みです。さらに明確にする必要がある場合はお知らせください

4

1 に答える 1