html - vertically center text in navigation bar -
i trying make navigation bar in buttons' text aligned in center vertically.
currently, working fine navigation bar besides vertical align.
i have tried many methods such line height, padding top , bottom (messes heights text divs overflow), flex, , table display.
html, body { height: 100%; margin: 0px; } #nav { height: 10%; background-color: rgb(52, 152, 219); position: fixed; top: 0; left: 0; width: 100%; color: white; font-family: calibri; font-size: 200%; text-align: center; display: flex; } #nav div { display: inline-block; height: 100%; align-items: stretch; flex: 1; } #nav div:hover { background-color: rgb(41, 128, 185); cursor: pointer; }
<div id="main"> <div id="nav"> <div><a>home</a></div> <div><a>page2</a></div> <div><a>page3</a></div> <div><a>page4</a></div> <div><a>page5</a></div> </div> </div>
all appreciated, thank you!
you can use table , table-cell method. need add css property display: table
parent element , display: table-cell; vertical-align: middle
children ones.
increased height demo purpose.
#nav { height: 50%; background-color: rgb(52, 152, 219); position: fixed; top: 0; left: 0; width: 100%; color: white; font-family: calibri; font-size: 200%; text-align: center; display: table; } #nav div { display: table-cell; height: 100%; vertical-align: middle; } #nav div:hover { background-color: rgb(41, 128, 185); cursor: pointer; }
<div id="main"> <div id="nav"> <div><a>home</a> </div> <div><a>page2</a> </div> <div><a>page3</a> </div> <div><a>page4</a> </div> <div><a>page5</a> </div> </div> </div>
Comments
Post a Comment