Home/ Questions/Q 7893575
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T07:10:03+00:00

I’m writing a mobile website and I’ve looked for hours at a centering problem

  • 0

I’m writing a mobile website and I’ve looked for hours at a centering problem I’m having.
The website is http://peatarian.com and you can emulate the iphone browser using transmog.

The CSS can be found at this page, but the most important parts are the following : 

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;}

and

.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;}

The images are the (main) menu. If you’d turn the iphone on its side, you’d see that they aren’t centered…. I’ve tried editing so many things in .qa-nav-main and also .qa-nav-mean-item but if I set float:center in the latter the menu items are all on a new line (though they are centered).

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you want to keep your code structure like you have it now, then just add a class to the <span> which contains your <center> which contains your buttons. The class would have the following rules:

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

    To your .qa-nav-main class add the following rule:

    text-align:center;

    This should give you the desired effekt of your spans floating in the middle. But I would suggest that you rework your markup a bit and get rid of all the spans and center tags.

    The above gives you the result depiced on the following image:
    enter image description here

    • 0