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


Tags: 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.


    CSS Howto..

    How can I put a inside of an ? [duplicate]

    How to restrict the contents in a table data() of a table to a certain limit?

    How to dynamically change pseudo-class value in css

    How do I make my CSS link up to files in different directories

    CSS class is missed after jQuery replaceWith. How to fix?

    How to dynamically remove all unwanted CSS and JS from page

    How to get html data-attribute value in css regular expressions

    How can I center my text on top of an image, given that it's responsive?

    How to apply local styles / JS to UIWebview after loading a URL

    How do I prevent child affected for transform scale in css3?

    How do I convert a text to css hex value?

    How can I style a list of name-value pairs to appear like an HTML table?

    How to make a text slideshow using CSS/HTML/JAVA

    css for modal - how to position it above page yet scrollable in window

    How to replace a text-align: -webkit-center?

    How come the first

    Rails 4: how to apply custom CSS to Rails form file field

    Basic CSS Question: How to specify height of background image of div?

    How to create inheritance with LESS?

    How to center an overflowing image inside of a constraining div

    How put an element more close to a html label

    how to colour user selected option using CSS in Firefox

    How to change hover background on links in css?

    Two buttons vertically misaligning, how to align them properly?

    how to find a css class which has another css class as sibling

    How to make a linear-gradient to fulfill two-coloured body in CSS

    How do I apply css code for svg in google api charts

    How to put padding on SPAN only when not empty

    How does browser layout adjacent div to a floating div

    How change css of disabled input checkbox tag?..because it's too light and hard to see