css - 固定幅のページ レイアウト、ただしコンテンツに合わせて調整可能

Question

Web サイトのテンプレートをアップグレードしたいと考えています。コンテンツを固定幅の中央の div に配置したい。これは問題ではなく、Web 上に多くの例があります。私はすでにテキストとテーブルのコンテンツを持っているので、div が一部のページのコンテンツを切り取らないようにしたいと考えています。幅を調整するためにJavascriptを使用したくありません。divでこれを行う方法はありますか、代わりにテーブルを使用する必要がありますか?

Answer 1

質問が正しくない、垂直方向のように中央に配置されていますか？使用する必要があるよりも垂直方向に中央position: absolute;に配置したい場合、および水平方向に中央に配置したい場合は、それと同じmargin: auto;くらい簡単に使用する必要があります...

/* Totally center fixed width content */

.center {
   position: absolute;
   top: 50%;
   left: 50%;
   margin-top: /* Half of the total height of the container div */
   margin-left: /* Half of the total width of the container div */
}

コンテンツを水平方向に中央揃えにする必要がある場合は、次を使用する必要があります

.horizontal {
   margin: auto;
}

fixed width divをoverflow: hidden;同時に使用しない限り、コンテンツはトリミングされません。