Text Alignment

Using css text alignment properties to align text in a list

by Alan Jones

HTML

<div id="wrapper">
<h1>
What A Mess!
</h1>
  <ul>
    <li>We're</li>
    <li>All</li>
    <li>Over</li>
    <li>The <i>(Sed ac neque lectus. Nunc lectus libero, iaculis at metus vel, iaculis facilisis leo. Pellentesque nec arcu pellentesque, aliquam lorem id, molestie odio. Morbi nisl sem, posuere quis libero in, eleifend aliquet risus. )</i></li>
    <li>Damn</li>
    <li>Place!</li>
  </ul>
</div>

CSS

@import 'https://fonts.googleapis.com/css?family=PT+Mono';
#wrapper {
  width: 60%;
  margin: auto;
  background-color: #7e2;
  color: #fff;
  text-align:center;
}

ul {
  padding: 20px 10%;
  font-family: 'PT Mono', monospace;
  list-style-type:none;
}
ul li:nth-child(1) { text-align:left;}
ul li:nth-child(2) {text-align:right;}
ul li:nth-child(3) {text-align:center;}
ul li:nth-child(4) {text-align:justify;}
ul li:nth-child(5) {text-align:initial;}
ul li:nth-child(5) {text-align:inherit;}