Akshit Akshit - 4 months ago 7
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.
CSS:

<style>

*{
margin:0;
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;
}




HTML:

<header>
<ul>

<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>
</ul>
</header>

Answer

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

header{
    text-align: center;
}

header > ul{
    display: inline-block;
}

JSFiddle

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.