• ベストアンサー

iPhone用のサイトの文字がずれて困っています。

iPhone用のサイトの文字がずれて困っています。 iPhone用のサイトに設置したグローバルナビゲーションの文字が、 iPhoneのsafariで見ると中央揃えにならず若干左寄りになってしまって困っています。 制作環境はMacOS10.6でDreamweaverを使用しております。PCのsafariでは中央に配置されています。 URLはこちらになります。 html  http://iymdisk-design.com/test/test.html css http://iymdisk-design.com/test/test.css 解決策をよろしくお願い致します。

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

cssを変更された後かもしれませんが。 margin-right: 10px; margin-left: 10px; この記述を margin:auto; にしてやればいけると思います。 もしこれでできないのであれば、ul要素をセンタリングするのではなく、inline-blockを活用してli要素を直にセンタリングするのも一つの手でしょう。 #gnavi ul { text-align:center; } #gnavi li { display: inline-block; list-style: none; } #gnavi ul li a { height: 1.8em; width: 56px; line-height: 1.8em; color: #426866; text-decoration: none; background: #ffffff; font-size: 10px; text-align: center; display: block; border-left: 1px solid #222; } #gnavi ul #nTop a { border-left-style: none; }

chocho117
質問者

補足

ご回答ありがとうございます。 <body>に対して<ul>全体が左寄りではなく、<li>の横幅に対して<a>の文字がiPhoneのsafariで見ると左寄りになってしまうという問題です。 説明がわかりづらく大変申し訳ありませんでした。 その後[#gnavi ul li a ]に[letter-spacing:-1.3px;]を付ける事によってかなり中央寄りになりましたが、もっとベストな方法がわかれば知りたいと思います。

関連するQ&A