Center a vertical list - HTML CSS CSS Widget

Description

Center a vertical list
Demo Code

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
a {<!-- w  w  w  . ja v a  2 s  .  c om-->
   display:block;
   font-weight:normal;
   padding:0em 0.2em;
   margin:auto;
}

ul li {
   font-size:2.2em;
   font-weight:bold;
   margin:0.6em 0px;
   line-height:2.4em;
   padding:0.5em 0.6em 0.6em 0.4em;
   height:3.3em;
   text-align:center;
   list-style:none;
}

.enlaces .titulo {
   color:Chartreuse;
   text-transform:uppercase;
   background:-moz-linear-gradient(center top , yellow 0%, blue 100%) repeat scroll 0% 0% transparent;
   background-image:linear-gradient(top, pink 0%, OrangeRed 100%);
   background-image:-o-linear-gradient(top,grey 0%, BlueViolet 100%);
   background-image:-moz-linear-gradient(top, Chartreuse 0%, yellow 100%);
   background-image:-webkit-linear-gradient(top, blue 0%, pink 100%);
   background-image:-ms-linear-gradient(top, OrangeRed 0%, grey 100%);
   background-image:-webkit-gradient(
   linear,
   left top,
   left bottom,
   color-stop(0, BlueViolet),
   color-stop(2, Chartreuse)
   );
   margin:0em;
   height:2em;
   font-size:2.3em;
   text-align:center;
}

.enlaces {
   background:none repeat scroll 0% 0% yellow;
   color:blue;
   margin:0.16em;
   padding:0.3em -2.7em 3em 0.6em;
   vertical-align:middle;
   text-align:center;
   vertical-align:center;
}

.enlacesLine1 {
   line-height:41px;
}
</style> 
 </head> 
 <body> 
  <div> 
   <ul> 
    <li class="titulo">Lorem ips</li> 
    <li class="enlaces enlacesLine1"> <a href="">Lorem ips</a> </li> 
    <li class="enlaces enlacesLine1"> <a href="">Lorem ips</a> </li> 
    <li class="enlaces"> <a href="">Lorem ipsum d<br>Lorem ipsum d</a> </li> 
   </ul> 
  </div>  
 </body>
</html>
Center a vertical list - HTML CSS CSS Widget

Description

Demo Code

Related Tutorials
