0

我正在编写一个移动网站，并且我已经寻找了几个小时来解决我遇到的中心问题。该网站是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;

这应该会给您希望的跨度在中间浮动的效果。但我建议你稍微修改一下标记，去掉所有的 span 和 center 标签。

以上为您提供了下图所示的结果： 在此处输入图像描述

于 2012-05-07T12:04:09.787 回答