Trying to center a link in CSS with the top header but wont move

Question

Trying to center a link in CSS with the top header but wont move

999 views Asked by user3466255 At 27 November 2013 at 15:05

Hello I am trying to keep the links centered of the tan margin. How do I get it centered to the tan margin? I've tried a few things but margins won't move.

Here is the website if you want to visually see the issue:

http://codepen.io/willc86/pen/hpFLe

I am not sure why links don't want to move when I use margin-left or margin-top

css is

#header{
  background-color: tan;
  width: 90%;
  Height: 80px;
  margin: auto;
  margin-bottom: 30px;
  text-align: center;
}

#header a {
  margin: 40px;
  border: 3px solid green;  

}



#box{
  border: 3px solid red;  
}

#space{
  text-align: center;

}
#leftcolumn { 
  width: 300px; border: 1px solid red; float: left; margin-left: 30px;


}
#mcolumn {
   width: 300px; border: 1px solid red; margin: auto;

}
#rightcolumn { 
  width: 300px; border: 1px solid red; float: right; margin-right: 30px;


}

.clear {
   clear: both;
}



#box2{
  border: 3px solid green;
  margin: 40px;
  text-align: center;
}

#bx{
  border: 3px solid green;
  margin: auto;
  width: 200px;

}

#box2{
  border: 3px solid green;
  margin: 40px;
  text-align: center;
}

#margin{
  margin: 30px;
}

and my html is

<html>
    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>

    </head>
    <body>

      <div id="header">       
        <a href="http:www.facebook.com"> Facebook </a>
        <a href="http:www.facebook.com"> Google </a>
        <a href="http:www.facebook.com"> Yahoo </a>        
      </div>


      <div id="box">
          <div id="space">       
                <div id="leftcolumn"><p>LEFT</p></div>
                <div id="rightcolumn"><p>RIGHT</p></div>
                      <div id="margin">
                <div id="mcolumn"><p>mcolomn</p></div>
                      </div>
                <div class="clear"></div>          
          </div>
      </div>



      <div id="box2">       
            <div id="margin">
                <div id="bx">
                <p> hello what is up
                </div>
            </div>
      </div>



    </body>
</html>

Original Q&A

There are 5 answers

**Jop** · Answer 1 · 2013-11-27 15:08:48

Jop On 27 November 2013 at 15:08

If you want to align the links vertically:

    #header a {
  ...
  line-height: 80px;
}

**GreyRoofPigeon** · Answer 2 · 2013-11-27 15:12:35

GreyRoofPigeon On 27 November 2013 at 15:12

Add this to #header

#header {
   ....
   line-height: 80px;
   vertical-align: middle;
}

Also check the demo.

Note that this might give trouble if you want to lines of menu.

**NoobEditor** · Answer 3 · 2013-11-27 15:12:52

NoobEditor On 27 November 2013 at 15:12

General tip : always add line-height equal to div's height to align your link in vertical middle position

line-height:80px; in #header a would do the job for you! :)

**luca** · Answer 4 · 2013-11-27 15:25:04

luca On 27 November 2013 at 15:25

#header a {
    border: 3px solid #008000;
    display: inline-block;
    margin: 0 40px;
    position: relative;
    top: 50%;  
}

Note: the top: 50% somehow uses height and margin of parent.

**Chris Smith** · Answer 5 · 2013-11-27 15:26:20

You can also do it like this: create a div inside (I've called it links) which you can format away from your other div. The margins don't show because the text is inline, and you can't give inline text a top and bottom margin. Changing it to display: inline-block and position: relative allows you to change the place of the div (if you don't want to set line height). Top: 36% will centre it because this counts the margin (so you want half of 80/110 px, or 4/11 = ~36% (you can make this 50% by adding the margin to the object beneath).

HTML:

<div id="links"><a href="http:www.facebook.com"> Facebook </a>
  <a href="http:www.facebook.com"> Google </a>
  <a href="http:www.facebook.com"> Yahoo </a>
</div>

CSS:

#header a {
  border: 3px solid green;
  margin-left: 40px;
  margin-right: 40px;
}

#links {
  display: inline-block;
  position: relative;
  top: 36%;
}

http://codepen.io/anon/pen/vbJkg

TechQA.

Trying to center a link in CSS with the top header but wont move

There are 5 answers

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in ASP.NET

Related Questions in CSS

Related Questions in CASCADINGDROPDOWN

Popular Questions

Popular Tags

Trending Questions