Align text at left and put whole at center of parent div - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Text

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Text

Description

Align text at left and put whole at center of parent div

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
.container<!-- w  ww  . ja  v a2  s  .  c  o  m-->
 {
   text-align:center;
   width:100%;
   margin:0 auto 0 auto;
   background:pink;
}

.content
 {
   width:100%;
   height:301px;
}

.links
 {
   display:inline-block;
   list-style-type:none;
   margin:0 auto;
   text-align:left;
}

.links li a
 {
   text-decoration:none;
   background:red;
   color:Chartreuse;
   margin-top:21px;
   margin:0 auto;
}
</style> 
 </head> 
 <body> 
  <div class="container"> 
   <h3>Title:</h3> 
   <div class="content"> 
    <ul class="links"> 
     <li> <a href="#">This link is bigger</a> </li> 
     <li> <a href="#">Smaller 1</a> </li> 
     <li> <a href="#">link 1</a> </li> 
     <li> <a href="#">link</a> </li> 
    </ul> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials