How to move links in the middle of the Web page using html/css?

Problem :

I have the following links Page 1 |Page 2|Page 3|....|Page 10 I want these links to appear inline in the middle of my web page. Here is the code:

h2 {
   font-family:"Arabic Typesetting",serif;
}
h2 {
   font-size:50px;
}
ul{
   list-style-type:none;
   margin:10;
   padding:10;
}
li{
   display:inline;
}
<ul>
    <li>  <a href = "#page1.hmtl" style = "text-decoration:none"> Page 1 | </a> </li>
    <li>  <a href = "#page2.html" style = "text-decoration:none"> Page 2 | </a> </li>
    <li>  <a href = "#page3.html" style = "text-decoration:none"> Page 3 | </a> </li>
    <li>  <a href = "#page4.hmtl" style = "text-decoration:none"> Page 4 | </a> </li>
    <li>  <a href = "#page5.html" style = "text-decoration:none"> Page 5 | </a> </li>
    <li>  <a href = "#page6.html" style = "text-decoration:none"> Page 6 | </a> </li>
    <li>  <a href = "#page7.hmtl" style = "text-decoration:none"> Page 7 | </a> </li>
    <li>  <a href = "#page8.html" style = "text-decoration:none"> Page 8 | </a> </li>
    <li>  <a href = "#page9.hmtl" style = "text-decoration:none"> Page 9 | </a> </li>
    <li>  <a href = "#page10.hmtl" style = "text-decoration:none"> Page 10 | </a> </li>
</ul>

In here my pages appear as bulleted list, however, on the webpage they appear in line on the right hand side of the screen. I want them to be shifted in the middle of the screen. I tried using < center > but what it does is shift them in the middle of the screen in a shape of a column like it shows in here, but I want them to be in line.

Solution :

It seems like you are missing a few key components that will help for future use of HTML/CSS. I took your code and restructured it to this:

h2 {
   font-family:"Arabic Typesetting",serif;
   font-size:50px;
}
ul{
   list-style-type:none;
   margin:10px;
   padding:10px;
   text-align: center;
}
li{
   display:inline;
}

All I did was merge both of your h2 tags into one (you really don't need two) and I added the 'text-align: center;' to align the text in the center of the page. To get a better picture of this, I created a working example on JSFiddle for you which can be found here. Another key thing to remember is the use of "px" at the end of every size you are looking to make something. There are other ways to create a size for an object (i.e. the use of 'em' and percentages) but if you are new to HTML/CSS, stick to the basics until you feel comfortable mucking with em and percentage sizes. Either way, this should fix your problem. One last thing is to make sure you are using a separate page for CSS. You should place the following code in your section like so:

<head>
<link href="PUT THE URL TO THE CSS PAGE HERE" type="text/css" rel="stylesheet" /> 
</head>

If you aren't using another CSS page, just copy the CSS code above, create a new document and save it whatever you want it to be (maybe coolstuff.css) and then use that URL to put into the above example like so:

<link href="coolstuff.css" type="text/css" rel="stylesheet" />

And that will enable you to use your CSS coding on an HTML page.

For others having same question: It can be done by using stringByEvaluatingJavaScriptFromString: method of UIWebView (upon webViewDidFinishLoad) -(void)webViewDidFinishLoad:(UIWebView *)webView { [webView stringByEvaluatingJavaScriptFromString:@"document.getElementById('topBarBody').remove();"]; } ...

HTML: <div style="float:left;"> <label for="text_sample" class="left">Example Text</label> <div id="spinner" class="left">XX</div> <label> <input type="text" id="input_sample" name="xxxx" value="" /> </label> </div> CSS: label { display: block; } .left { float: left; }...