CSSセンタリングイメージ

Question

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

CSSがthis pageで見つけることができますが、最も重要な部分は、以下の通りである：

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と設定すると、メニュー項目はすべて新しい行になります（中央に配置されますが）。

Answer 1

今のようなコード構造を維持したい場合は、<center>にボタンが含まれている<span>にクラスを追加するだけです。

text-align:center; 

これは真ん中に浮かぶあなたのスパンのeffektたいあなたを与える必要があります。次のルールを追加するには、.qa-NAV-メインクラスに

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

：クラスには、次のルールを持っているでしょう。しかし、私はあなたのマークアップを少し修正し、すべてのスパンとセンタータグを取り除くことをお勧めします。イメージがある