How to center links in header using CSS? -


i wanted make links centered on screen rather placed in location number of pixels.

here's code:

css:

.horizlinks  {     position: absolute;      top: 77px;      left: 180px; } .horizlinks ul {      margin: 0px;  } .horizlinks li {     margin: 0px 15px 0px 0px;     list-style-type: none;     display: inline; } 

this html on webpage:

<div id="container"></div> <div id="header"></div> <div class="horizlinks"> <ul> <li><a href="http://www.website.com">header link 1</a></li> <li><a href="http://www.website.com">header link 2</a></li> </ul> </div> 

use text-align:center on <div class="horizlinks">. also, set padding of ul elements 0.

your absolute positioning of container div pushing whole div side right side of page, unless remove that, content inside never able in middle.

jsfiddle here.


css:

.horizlinks  {   text-align:center; }  .horizlinks ul {    margin: 0;    padding:0; }  .horizlinks li {   margin: 0 15px 0 0;   list-style-type: none;   display: inline; } 

Comments

Popular posts from this blog

Winapi c++: DialogBox hangs when breaking a loop -

vb.net - Font adding using PDFsharp -

javascript - jQuery iScroll clickable list elements while retaining scroll? -