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

c++ - Function signature as a function template parameter -

algorithm - What are some ways to combine a number of (potentially incompatible) sorted sub-sets of a total set into a (partial) ordering of the total set? -

How to call a javascript function after the page loads with a chrome extension? -