0

私はモバイルウェブサイトを書いています、そして私は私が抱えているセンタリングの問題を何時間も探してきました。Webサイトはhttp://peatarian.comで、 transmogを使用してiPhoneブラウザをエミュレートできます。

CSSはこのページにありますが、最も重要な部分は次のとおりです。

html, body {height:100%;float:center;text-align:center;}
body {background-url:url(raypeat.gif) no-repeat left top;margin:0; padding:0; text-            align:center;color:black;}
body,td,input,textarea {font-size:100%; font-family:Verdana, Arial, Helvetica, sans-serif;}
a:link,a:active,a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
p {margin-top:0;}
table {background: none repeat scroll 0 0 white;}

と

.qa-nav-main {float:center;clear:both;border-top:1px solid black;border-bottom:1px solid black;background-color:#B7E3DA;margin:auto;margin-top:10px;padding:10px 0px;display:block;margin-left:auto;margin-right:auto;}
.qa-nav-main-list {font-size:125%; list-style:none;margin:auto;display:block;margin-left:auto;margin-right:auto;}
.qa-nav-main-item,.qa-nav-main-item-opp {margin:auto;display:block;float:left;margin-left:auto;margin-right:auto;}
.qa-nav-main-item {display:block;margin-left:auto;margin-right:auto;}
.qa-nav-main-item-opp {margin:auto;display:block;margin-left:auto;margin-right:auto;}
.qa-nav-main-link {color:#fff; display:block; padding:6px 10px; background-color:none;}
.qa-nav-main-selected {background-color:none; text-decoration:none;}
.qa-nav-main-hot .qa-nav-main-link {background:none;}
.qa-nav-main-hot .qa-nav-main-link:hover, .qa-nav-main-hot .qa-nav-main-selected {background:#396E63;}

画像は（メイン）メニューです。iPhoneを横向きにすると、中央に配置されていないことがわかります。.qa-nav-mainと.qa-nav-mean-itemで多くのことを編集してみました。しかしfloat:center、後者を設定すると、メニュー項目はすべて新しい行に表示されます（中央に配置されていますが）。

4

1 に答える 1

2

現在のようにコード構造を維持したい場合は、ボタンを含む<span>を含むクラスをに追加するだけです。<center>クラスには次のルールがあります。

display: block;
width: 200px; /* this should be the width you need, please assign your own */
margin: 0 auto;

.qa-nav-mainクラスに、次のルールを追加します。

text-align:center;

これにより、真ん中に浮かんでいるスパンの望ましい効果が得られるはずです。ただし、マークアップを少し作り直して、すべてのスパンと中央のタグを削除することをお勧めします。

上記は、次の画像に示されている結果を示しています。 ここに画像の説明を入力してください

于 2012-05-07T12:04:09.787 に答える