Akshit Akshit - 1 year ago 54
HTML Question

Can't move a link(shaped into a block) to center

I just want to move the 3 links(shaped into block) to center. it should be easy but I just can't figure out how to. Center as in horizontally center. its probably a silly mistake or concept problem. I don't want to move the text in centre of box, just want to move the box.


padding: 0;
box-sizing: border-box;
header li{
list-style: none;

a:link, a:visited
text-decoration: none;
background-color: green;
border: 5px solid black;
color: white;
display: block;
text-align: center;
width: 200px;
position: relative;
margin-left: 240px;
margin-bottom: 5px;

a:hover, a:active{
color: black;
background-color: red;
margin-bottom: 10px;
font-size: 1.5em;

header li:nth-child(3)
font-size: 25px;



<li><a href="http://www.google.com" target="_blank"> Google</a></li> <!-- notice here how when 9i add "http:// the link will open and if don't it won't-->
<li><a href="www.facebook.com" target="_blank"> Facebook </a></li>
<li><a href="www.wikipedia.com" target="_blank"> Wikipedia </a></li>

Answer Source

How about displaying your whole unordered list as an inline block and centering the text content within your header, making the list centered:

    text-align: center;

header > ul{
    display: inline-block;


Note: I removed the margin from your anchors, since I assumed this was some attempt at making them more central. Correct me if I'm wrong.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download