Search code examples
htmlcsscenter

Vertically center a circle div inside the navbar

I designed a navbar for my site. With help from some really kind folks at atackoverflow, I was able to learn the use of table-cell and inline-table display attributes and center the headings for each tab.

However, the same method fails to work when instead of text, I have a circle div positioned inside the tab. It seems to push mess up the positioning of all other tabs.

HTML:

<div id="headContainer">
        <div id="rightBar">
            <a href="index.html"><div class="navelement" style="border-bottom: 5px solid #6217FF;"><span>home</span></div></a><!--
            --><a href="about.html"><div class="navelement"><span>about</span></div></a><!--
            --><a href="feedback.html"><div class="navelement"><span>feedback</span></div></a><!--
            --><a href="contact.html"><div class="navelement"><span>contact</span></div></a><!--
            --><a href="#"><div class="navelement"><span><div id="circle"></div></span></div></a>
        </div>
</div>

CSS:

#headContainer {
    height: 80px;
    width: 100%;
    background-color: rgba(28, 35, 46,0.9);
    transition:height 0.3s ease-out;
    border:0px solid yellow;
    position: fixed;
    top: 0px;
    z-index: 900;
    overflow: hidden;
}
#headContainer:hover {
    height: 120px;
}

#rightBar {
    display: inline-block;
    height: 100%;
    border:0px solid cyan;
    margin-left: 160px;
    float: right;
}
.navelement{
    display: inline-table;
    height: 100%;
    border-top:5px solid transparent;
    padding-left: 50px;
    padding-right: 50px;
    padding-left: 3.5vw;
    padding-right: 3.5vw;
    color: #DFDFDF;
    border-bottom: 5px solid transparent;
    transition:all 0.3s;
        border-top:5px solid #6217FF;

}
.navelement:hover{
        background:#6217FF;
}
.navelement span {
    display: table-cell;
    font-size: 1.2em;
    font-size: 1.2rem;
    vertical-align: middle;
    font-family: 'Open Sans';
}
#circle{
    width:50px;
    height:50px;
    border-radius:50%;
    background-color:green;
}

What I want it to look like:

enter image description here What it looks like right now:

enter image description here

Fiddle: http://jsfiddle.net/R8nGu/1/

Solution

  • inline-table and inline-cell are not commonly used for this task. Rather, it is done with relative positioning. Also, your navigation has a very strange structure, let's correct that first (this is the most widely used approach for nav structures):

    <ul id="rightBar">
  <li><a href="index.html" style="border-bottom: 5px solid #6217FF;"><span>home</span></a></li>
  <li><a href="about.html"><span>about</span></a></li>
  <li><a href="feedback.html"><span>feedback</span></a></li>
  <li><a href="contact.html"><span>contact</span></a></li>
  <li><a href="#"><span id="circle"></span></a></li>
</ul>

    A well-known technique to vertically center content is to use the top and margin-top properties together on a relatively positioned element. Set top: 50%, then set margin-top to minus half of the height of the element. In your case, given that the spans have a font-size of 1.2rem, that would be margin-top: -0.6rem;.

    You can do the same for your circle: it is 50px high, so the margin-top should be -25px.

    Check out the working fiddle here: http://jsfiddle.net/R8nGu/3/