Aligning text in the horrizontally and vertically in the center in html/css -
this question has answer here:
i needing vertically , horizontally align text center of nav div. provide both html , css down below.
here html portion of code.
<html> <head> </head> <title> dom chronicles </title> <body> <div id="header"> </div> <div id="space"> </div> <div id="nav"> <ul> <li>home</li> <li>music</li> <li>blog</li> <li>shop</li> <li>contact</li> </ul> </div> </body> </html> here css portion of code.
@font-face { font-family: mager; src: url(fonts/elegantlux-mager.otf); } #header { width: 1000px; height: 400px; margin: 0 auto; background-color: gray; } #space { width: 1000px; height: 10px; } #nav { width: 1000px; height: 50px; margin: 0 auto; background-color: gray; color: black; font-size: 25px; font-family: mager; } #nav li { list-style: none; display: inline; text-align: center; } #nav li:hover { opacity: .6; }
add display: table , text-align: center #nav element:
@font-face { font-family: mager; src: url(fonts/elegantlux-mager.otf); } #header { width: 1000px; height: 400px; margin: 0 auto; background-color: gray; } #space { width: 1000px; height: 10px; } #nav { width: 1000px; height: 50px; margin: 0 auto; background-color: gray; color: black; font-size: 25px; font-family: mager; display: table;/*add display table*/ text-align: center;/*add text-align center*/ } #nav li { list-style: none; display: inline; text-align: center; } #nav li:hover { opacity: .6; }<div id="nav"> <ul> <li>home</li> <li>music</li> <li>blog</li> <li>shop</li> <li>contact</li> </ul> </div>
Comments
Post a Comment