Почему мой заголовок вмешивается в мою гиперссылку?

Question

По какой-то причине мой #menu<a> перемещается в другое место каждый раз, когда я пытаюсь добавить свой #menubarheader<h1>. Я достаточно осведомлен, когда дело доходит до html и css, но я просто не могу найти решение этой проблемы. Вот мой код, пожалуйста, помогите.

HTML:

<div id="right"> 
    <div id="menubar"> 
     <h1 id="menubarheader">Latest News</h1> 
     <a href="#menu" id="button">&#8801;</a> 
    </div> 
</div> 

CSS:

#menubar { 
    width: 100%; 
    background-color: maroon; 
    height: 80px; 
    line-height: 80px; 
} 
#button { 
    color: black; 
    font-size: 4em; 
    text-decoration: none; 
    font-weight: lighter; 
    padding: 0px; 
    vertical-align: middle; 
    float: left; 
} 
#menubarheader { 
    text-align: center; 
    color: white; 
    vertical-align: middle; 
    font-weight: lighter; 
    font-size: 32px; 
} 

мне интересно, если высота строки проблема? Но я хочу сохранить высоту линии так, как она есть, потому что мне нужны эти дети #menubar для вертикального выравнивания. Я делаю приложение Android с помощью PhoneGap, поэтому, если кто-то может помочь, он будет очень признателен. Заранее спасибо!

Answer 1

Я установил идентификатор - menubar в относительный и id button и menubarheader в абсолютный. Я считаю, что это то, что вы искали. Вот JSFiddle: >>>CLICK HERE<<<

HTML:

<div id="right"> 
    <div id="menubar"> 
     <h1 id="menubarheader">Latest News</h1> 
     <a href="#menu" id="button">&#8801;</a> 
    </div> 
</div> 

CSS:

#menubar, #menubarheader { 
    width: 100%; 
    height: 80px; 
} 
#menubar { 
    min-width: 250px; 
    position: relative; 
    background-color: maroon; 
} 
#button, #menubarheader { 
    position: absolute; 
    vertical-align: middle; 
    font-weight: lighter; 
} 
#button { 
    padding: 0px; 
    text-decoration: none; 
    font-size: 4em; 
    color: black; 
} 
#menubarheader { 
    text-align: center; 
    color: white; 
    font-size: 32px; 
}