Div Alignment Issues

Question

I just came back from a 10 year hiatus of web design. I'm getting close to knowing the in's and out's of div properties (those weren't as popular back in my day as they are now). Right now I'm trying to get a layout like this:

Logo | Icons Div Banner Div Link Div Content Div Footer Div

My issue at the moment is centering the Link Div, which is:

<div class="menu">
    <a class="link1" href="#">Home</a>
    <a class="link2" href="#">About Us</a>
    <a class="link3" href="#">Services</a>
    <a class="link4" href="#">Portfolio</a>
    <a class="link5" href="#">Contant Us</a>
</div>

The CSS that I'm using:

.menu   
    {
        TO BE USED
    }

.menu a
    {
        display: block;
        float: left;
        line-height: 144px;
        margin: 5px;
        opacity: 0.3;
        text-align: center;
        width: 144px;
    }

.link1
    {
        background: #fdd22a;
    }

.link2
    {
        background: #009fe3;
    }

.link3
    {
        background: #574696;
    }
.link4
    {   
        background: #ee7202;
    }
.link5
    {
        background: #e61c67;
    }
.link6
    {
        background: #96c11f;
    }

Here's a sample of what I'm doing: http://www.ragnarok.ws.

At the moment, I don't have enough links (or knowledge) to align the links with the left and right margins (line up with the left side of the logo and right side of the social media icons) to a point where it doesn't look spread out and silly, so I figured my next best option is to try and center the divs for the link. The coding I linked is also a bit rough. I haven't had a chance to go and clean things up, yet.

Any suggestions is greatly appreciated.

Answer 1

Taken from Learn CSS Layout:

   .menu
    {
       width: 600px;
       margin: 0 auto;
    }

Setting the width of a block-level element will prevent it from stretching out to the edges of its container to the left and right. Then, you can set the left and right margins to auto to horizontally center that element within its container. The element will take up the width you specify, then the remaining space will be split evenly between the two margins.

Answer 2

Remove float:left from .menu and .menu a and just add

margin: 0 auto;

to .menu to make the links centered.

Also, change your display from block to inline-block for .menu a

Remember to give a width for .menu. I just tried a width of 61% via Inspect Element and it got right.

OR

Add

text-align: center;

to .menu

and change your display from block to inline-block for .menu a.

No need for specifying width for .menu in this method. May be the easiest solution.