Centering a tags in navigation bar

Description

Demo Code


<html>
 <head> 
  <meta name="viewport" content="width=device-width"> 
  <style>
body {<!-- w ww  .  ja v  a2  s  .co  m-->
   padding:0;
   float:none;
   margin:0;
}

#menu {
   width:100%;
   height:7.6em;
   background-color:Chartreuse;
   text-align:center;
}

footer {
   padding:0;
   width:100%;
   height:4em;
   background-color:yellow;
   text-align:center;
}

#footerparagraph {
   font-family:sans-serif;
   font-style:italic;
   color:blue;
   font-size:0.76em;
   margin:0 -86em 0 0;
}

#myCanvas {
   border-style:solid;
   margin:6em 23em;
   box-shadow:0em 0em 2.26em 0.6em;
}

#imageAxel {
   border-style:solid;
   border-width:0.4em;
   border-radius:0.2em;
   border-color:pink;
   box-shadow:;
   margin-top:4.76em;
   margin-left:-3.7em;
   -webkit-transform:rotate271deg);
   -moz-transform:rotate(271deg);
   -o-transform:rotate(271deg);
   -ms-transform:rotate(271deg);
   transform:rotate(271deg);
}

#clock {
   float:right;
   color:OrangeRed;
   margin:0em 3em 0em 0em;
   font-family:sans-serif;
   font-style:italic;
   font-size:2.76em;
   line-height:4.6em;
}

#about {
   width:21em;
   height:32.26em;
   background-color:grey;
   margin:100px 126px;
   padding:;
}

#aboutText {
   width:41em;
   height:32.26em;
   background-color:BlueViolet;
   margin:-601px 416px;
   padding:;
}

a {
   font-size:3em;
   font-family:sans-serif;
   text-decoration:none;
   color:Chartreuse;
   padding:0.26em;
   display:inline-block;
   margin:2em 3em 0px 3em;
}

a.active {
   border-style:solid;
   border-width:3px;
   border-color:yellow;
   color:blue;
}

a:hover {
   color:pink;
}

h1 {
   text-align:center;
   font-family:sans-serif;
}

h2 {
   color:OrangeRed;
   font-family:sans-serif;
   text-align:center;
   font-style:italic;
}

header {
   background-color:grey;
   color:BlueViolet;
}

li {
   display:inline;
}

p {
   color:Chartreuse;
   padding:16px;
   font-family:sans-serif;
   margin:2.6em 0em;
}

ul {
   text-decoration:none;
   display:inline;
}

ul * {
   padding-top:0;
}

#welcome {
   background-color:yellow;
   font-family:Verdana;
   width:401px;
   height:auto;
   margin:100px auto;
   padding:31px;
}

#pAbout {
   max-width:201px;
}
</style> 
 </head> 
 <body> 
  <nav id="menu"> 
   <ul> 
    <img src="https://www.java2s.com/style/demo/Opera.png"> 
    <li> <a href="index.php" class="active">Lor</a> </li> 
    <li> <a href="game.html">Lorem i</a> </li> 
    <li> <a href="about.html">Lorem </a> </li> 
    <li> 
     <div id="clock"></div> </li> 
   </ul> 
  </nav> 
  <div id="welcome"> 
   <center> 
    <h2>Lorem ipsu</h2> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed fermentum. Aliquam erat volutpat. Vestibulum tortor neque, orna</p> 
   </center> 
  </div>  
 </body>
</html>
Centering a tags in navigation bar - HTML CSS CSS Widget

Description

Demo Code

Related Tutorials
