html - How to center text vertically inside a div with dynamically changing height? -
i trying create website navbar using divs instead of usual lists. divs inline-blocks , on hover, navbar expands. should cause inner divs expand (height:100%), while retaining centered text. want utilize html , css.
one way set line-height , utilize vertical-align:middle. since div expands vertically in dynamic manner, cannot give static value line-height. tried using line-height:100%, doesn't seem help!
the html:
<html> <head> <title>hello</title> <link rel="stylesheet" type="text/css" href="style2.css"> </head> <body> <div id="headcontainer"> <a href="/home"><div id="logo"></div></a> <div id="rightbar"> <div class="navelement"><a href="home">home</a></div> <div class="navelement"><a href="home">home</a></div> <div class="navelement"><a href="home">home</a></div> <div class="navelement"><a href="home">home</a></div> </div> </div> </body> the css:
* { margin: 0; padding: 0; } #headcontainer { height: 80px; width: 100%; background-color: white; border: 5px solid red; } #headcontainer:hover { height: 100px; /*dynamically alter navbar height on hover, changing height of children*/ } #rightbar { line-height:100%; display: inline-block; width:80%; height: 100%; border: 5px solid blue; vertical-align: middle; } .navelement{ display: inline-block; height: 100%; border:2px solid cyan; } the jsfiddle: http://jsfiddle.net/gbz3s/1/
you can this
you need give display: inline-table; .navelement ,
display: table-cell; vertical-align: middle; .navelement a
css
.navelement{ display: inline-table; height: 100%; border:2px solid cyan; } .navelement { display: table-cell; vertical-align: middle; } html dynamic text center
No comments:
Post a Comment