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

Perl - how to grep a block of text from a file -

delphi - How to remove all the grips on a coolbar if I have several coolbands? -

javascript - Animating array of divs; only the final element is modified -