0

I have the following HTML:

<div id="main-menu">
    <a id="main-menu-logo" href="index.html">
        <span style="color:white;">MY NAME</span>
    </a>
    <div id="main-menu-items">
        ......
    </div>
</div>

And the following CSS:

#main-menu{
    margin-left: 1px;
    float: left;
    height: 40px;   
    border: 2px solid black;
    background-color: rgba(0, 0, 0, 0.8);
    width: 120px;
}

#main-menu-items{
    display: none;
}

#main-menu-logo {   
    line-height: 40px;
    display: inline-block;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center; 
}

How can I get the main-menu-logo to be centered inside the main-menu?

Thank you

chintoo
  • 27
  • 6

1 Answers1

2

You can centre using display:table and margin. 

#main-menu-logo {   
    line-height: 40px;
    display: inline-block;
    margin: 0 auto;
    display: table;
}

More info here: How to horizontally center a <div> in another <div>?

Community
  • 1
  • 1
mongjong
  • 479
  • 3
  • 6
  • Thank you for the very helpful link and answer. I have one more question in regards to your solution if you don't mind. I have a small javascript that changes the dimensions of the main-menu upon clicking it. However, I am trying to add also a float:right to main-menu-logo. It does not seem to work - can you please tell me what is wrong? $("#main-menu-logo").animate({"float":"right"},250) – chintoo Jul 28 '15 at 03:34
  • Your syntax is wrong. You need to do something like: $('#main-menu-logo').animate({ 'float': 'right', 'width' : 250 }, "slow"); and of course fire it using the click() method. – mongjong Jul 28 '15 at 03:44
  • Thank you for the explanation. – chintoo Jul 28 '15 at 15:43
  • No problems - glad i could help :) – mongjong Jul 29 '15 at 02:06