0


(出典: ctrlv.in )

ブラウザの幅を約 700 ピクセル未満に縮小すると、レスポンシブ デザインの Web サイトでこの問題に直面しています。

追加しましmargin-left: auto; margin-right: auto;たが、出力は変更されません。左: 50% と入力すると、ヘッダーがあるため、おそらく奇妙な位置が表示postion:fixedされます (ただし、他の場所では上/左/右/下について言及していません)。

ロゴ「ilovetrolls」はページの中央から始まります....そのため、画像の中央が中央にありません。ページ (ソース: ctrlv.in )

助けていただければ幸いです。どうもありがとう

4

4 に答える 4

1

(663 行目)のdisplayプロパティをに変更する必要があります。Chrome Web インスペクターをいじって、そのように動作させました。どちらに設定しても害はありませんでした。#topdiv1display: blockfloatfloat: none

于 2013-03-01T07:46:15.117 に答える
1

このスタイルを削除するだけです

#header {
    text-align: center;
}

メディアのみの画面幅 767 にインライン行番号 428 を配置

于 2013-03-01T07:52:49.830 に答える
1

次のようなことを試してください：

<style>
.container {
  margin-left: auto;
  margin-right: auto;

  /* To see the affect of the above; not part of centering implementation. */
  background-color: #aaa;
  width: 200px;
}
</style>
<div class="container">
  Hello, world!
</div>
于 2013-03-01T07:54:17.687 に答える
1

取っdiv.#topdiv3て、取り除いfloat: leftて、入れてmargin-left: auto; margin-right: auto。その後div.#topdiv3外に移動div.#outter-wrapper

ここに画像の説明を入力

于 2013-03-01T07:54:42.740 に答える