0

^^^

This doesn't solve my question my situation is different, because of the animated css navigation button. Can get it work like that: display: table-cell and vertical-align: middle; etc.

I have a responsive header that shows a navigation button when in mobile size where you can show the rest of the menu items (disabled in example don't need it for my question).

Because i going to make the header responsive in height it is beter that the navigation button is always centered vertical. Now it is placed in the center with a top margin of 20px and because the button is 20px in height and the header is 60px it is centered, but that won't work if the header height changes responsively.

--> FIDDLE

enter image description here

Code:

<header>
<nav>
    <div class="col-nav">
        <a href="#" class="nav-btn"><span class="nav-icon"></span></a>          
        <a href="#" class="home">Name</a>
    </div>
    <ul>
        <li class="col-nav"><a href="#">Item1</a></li>
        <li class="col-nav"><a href="#">Item2</a></li>
        <li class="col-nav"><a href="#">Item2</a></li>
    </ul>
</nav>
</header>
KP83
  • 616
  • 1
  • 10
  • 34
  • possible duplicate of [vertical alignment of elements in a div](http://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div) – Paulie_D Feb 19 '15 at 09:33
  • I seen that, but can't get it to work in my situation. Do you know? – KP83 Feb 19 '15 at 09:39
  • If you make a demo with your current CSS we might be able to offer suggestions. – Paulie_D Feb 19 '15 at 09:39
  • this is my current css demo. Question is simple: i don't want to vertical centered like i done now, but i want to do it literally so it changes with the different header heights. – KP83 Feb 19 '15 at 09:49
  • Nobody can't help me must be easy for the most of the coders here? – KP83 Feb 19 '15 at 10:19

2 Answers2

2

If you can set it's parent's position to relative then you might be able to use

position: relative;
top: 50%;
transform: translateY(-50%);

on the button

Serge Profafilecebook
  • 1,165
  • 1
  • 14
  • 32
  • I didn't give much details here so I expect my answer to be stolen any time soon to someone willing to add a few more words and a flashy layout. – Serge Profafilecebook Feb 24 '15 at 14:06
  • Thanks mate this did the trick: `.nav-btn { display: none; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); transform: translateY(-50%); background-color: transparent; } ` – KP83 Feb 25 '15 at 16:10
0

You can try like this DEMO Just changed margin value

CSS:

.nav-icon {
    position: relative;
    margin-top: 7px;        
}
G.L.P
  • 7,119
  • 5
  • 25
  • 41
  • No that is not what i mean in my example the navigation icon/button already is centered vertically and that is done with a top margin of 20px, because nav-btn= 20px height and header= 60px, but i want to make the header height changes with different breakpoints i need the icon to be centered literally and not like i done now. – KP83 Feb 19 '15 at 09:46