title: positioning the text in the center of li tag
body: <p>I have created three blocks using the html code as shown below. The "a" tag has the min-height css property because of which it will be displayed as block. I am not able to place the text inside the span tag in the center of "<code>li</code>" tag. Although each text inside the  tag is of different length, I want to display them in the center. </p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="col-md-12"&gt;
          &lt;ul id="tabs" class="nav-tabs"&gt;
            &lt;li class="col-md-4 nav-list"&gt;
              &lt;a href="#" class="nav-block"&gt;
                &lt;span class="header"&gt;Data&lt;/span&gt;
              &lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="col-md-4 nav-list"&gt;
              &lt;a href="#" class="nav-block"&gt;
                &lt;span class="header"&gt;Charts&lt;/span&gt;
              &lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="col-md-4 nav-list"&gt;
              &lt;a href="#" class="nav-block"&gt;
                &lt;span class="header"&gt;Reports&lt;/span&gt;
              &lt;/a&gt;
            &lt;/li&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>.container ul {
      list-style: none outside none;
  }
  
  li {
      display: list-item;
  }
  
  .col-md-4 {
      width: 33%;
  }
  .nav-block {
      background-color: #FFA500;
      display: block;
      min-height: 70px;
      position: relative;
  }
  
  .container .nav-block .header {
      color: #FFFFFF;
      font-size: 2em;
      font-weight: bold;
      left: 20%;
      padding: 5px;
      position: relative;
      text-align: center;
      top: 21%;
  }
  </code></pre>
  
  <p>Please let me know where I am going wrong</p>