3

コンテンツ div を中央に配置しようとしています。これは 100% に設定されており、div は body に含まれており、これも 100% に設定されています。画面の解像度が高い場合にコンテンツがそれ以上伸びないようにするため、最大幅は 1400px です。問題は、margin: auto を使用しても機能しないことです。私のコンテンツは、1400px よりも幅の広い画面で中央に配置されず、左側に立っています。

max-width を削除すると、すべてがワイド画面で完全に中央に配置されますが、コンテンツは画面全体に引き伸ばされます...

#content {
width: 100%;
height: auto;
position: absolute;
top: 400px;
margin: 0 auto;
margin-top: 50px;
display: none;
max-width: 1400px;

}

4

3 に答える 3

8

これを実現する最も簡単な方法は、widthプロパティを必要な最大幅に設定し、 max-width: 100%;. これにより、100% より大きくなるのを防ぎますが、それでも最大幅まで上がります。また、absoluteポジショニングを削除する必要があります。

JSフィドル

于 2013-06-20T16:22:58.663 に答える
4

transform追加のマークアップやメディア クエリを必要としないこの手法を使用できます。

#content {
    position: relative;  /* 'fixed' will work also. */
    max-width: 500px;    /* Your required width here. */
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
}

ここにデモがあります https://jsfiddle.net/matharden/6uduf7av/

于 2016-09-27T16:04:10.923 に答える
0

フレックスボックスを使用...

このクラスを親要素 (本体) に入れます。

HTML

<body class="p-flexbox flex-hcc">
 <!-- The content -->
</body>

どこ：

  1. p-flexboxは親フレックスボックスを意味します
  2. flex-hccはflexbox- horizo​​ntal-center-center を意味します

CSS

.p-flexbox {
   display: -webkit-box;
   display: -moz-box;
   display: box;
}

.flex-hcc {

   -webkit-box-orient: horizontal;
   -webkit-box-pack: center;
   -webkit-box-align: center;

   -moz-box-orient: horizontal;
   -moz-box-pack: center;
   -moz-box-align: center;

   box-orient: horizontal;
   box-pack: center;
   box-align: center;

}

乾杯、レオナルド

于 2013-06-20T16:23:21.797 に答える