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

Popular posts from this blog

php - Submit Form Data without Reloading page -

linux - Rails running on virtual machine in Windows -

php - $params->set Array between square bracket -