title: How to move links in the middle of the Web page using html/css?
body: <p>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:</p>
  
  <pre><code>h2 {
     font-family:"Arabic Typesetting",serif;
  }
  h2 {
     font-size:50px;
  }
  ul{
     list-style-type:none;
     margin:10;
     padding:10;
  }
  li{
     display:inline;
  }
  &lt;ul&gt;
      &lt;li&gt;  &lt;a href = "#page1.hmtl" style = "text-decoration:none"&gt; Page 1 | &lt;/a&gt; &lt;/li&gt;
      &lt;li&gt;  &lt;a href = "#page2.html" style = "text-decoration:none"&gt; Page 2 | &lt;/a&gt; &lt;/li&gt;
      &lt;li&gt;  &lt;a href = "#page3.html" style = "text-decoration:none"&gt; Page 3 | &lt;/a&gt; &lt;/li&gt;
      &lt;li&gt;  &lt;a href = "#page4.hmtl" style = "text-decoration:none"&gt; Page 4 | &lt;/a&gt; &lt;/li&gt;
      &lt;li&gt;  &lt;a href = "#page5.html" style = "text-decoration:none"&gt; Page 5 | &lt;/a&gt; &lt;/li&gt;
      &lt;li&gt;  &lt;a href = "#page6.html" style = "text-decoration:none"&gt; Page 6 | &lt;/a&gt; &lt;/li&gt;
      &lt;li&gt;  &lt;a href = "#page7.hmtl" style = "text-decoration:none"&gt; Page 7 | &lt;/a&gt; &lt;/li&gt;
      &lt;li&gt;  &lt;a href = "#page8.html" style = "text-decoration:none"&gt; Page 8 | &lt;/a&gt; &lt;/li&gt;
      &lt;li&gt;  &lt;a href = "#page9.hmtl" style = "text-decoration:none"&gt; Page 9 | &lt;/a&gt; &lt;/li&gt;
      &lt;li&gt;  &lt;a href = "#page10.hmtl" style = "text-decoration:none"&gt; Page 10 | &lt;/a&gt; &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>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 &lt; 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.</p>