html - Nav being pushed down inside fixed div -
i want links vertical-aligned: middle; next <h1>element. isn't possible, because nav being pushed down reason. i've checked , there no margin or padding.
jsfiddle: https://jsfiddle.net/dak3up0m/
<div class="fixed"> <h1> title </h1> <nav> <ul> <li> <a href="#">link1</a> </li> <li> <a href="#">link2</a> </li> </ul> </nav> </div> .fixed { width: 100%; height: 100px; background-color:red; } h1 { height: 100px; line-height: 100px; display:inline-block; margin:0; color:white; } nav { position:relative; height:100%; width: auto; display:inline-block; background-color:green; top:0; right:0; > ul { height:auto; > li { font-size: 15px; padding: 0 12px; text-align:center; line-height: inherit; display:inline-block; &:not(:last-child) { margin-right:0; } button { padding: 0; &:hover { background-color: inherit; border:none; } } { line-height: 50px; } } } }
give nav height: 100px; whatever want vertical align give line-height: 100px;
https://jsfiddle.net/dak3up0m/14/
otherwise change whole structure , use flexbox, cleaner , easier check out:
.fixed { display: flex; align-items: center; height: 100px; background-color: tomato; h1 { margin: 0; } } nav ul { display: flex; align-items: center; margin: 0; padding: 0; list-style-type: none; li { margin-left: 10px; } }
Comments
Post a Comment