title: How can i align the text in center of a row in css?
body: <p>I have a list that has three rows. For each row, I have three columns: First column shows the detail of a job that includes three line:Job name, job description, and job type, the second row shows the location and last row is the due date. My expected result is as follows:</p>
  
  <p><a href="https://i.stack.imgur.com/qnX9V.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qnX9V.png" alt="enter image description here"></a>
  I am using <code>w3.css</code> to do it. </p>
  
  <pre><code>&lt;link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"&gt;
  </code></pre>
  
  <p>In which, I created three columns in a row. For each row, I insert the detail as follows</p>
  
  <pre><code>&lt;div class="w3-row-padding"&gt; 
      &lt;div class="w3-third" style="width:50%"&gt;
          &lt;h2&gt;Wordpress desiger&lt;/h2&gt;
          &lt;p class="desc"&gt;Wordpress and beyond &lt;/p&gt;  
          &lt;span class="jobtype"&gt;Part time&lt;/span&gt;  
      &lt;/div&gt; 
      &lt;div class="w3-third" style="width:30%"&gt;
          &lt;p class="location"&gt;NY.&lt;/p&gt;
      &lt;/div&gt; 
      &lt;div class="w3-third" style="width:20%"&gt;
          &lt;p class="time"&gt;Jan.&lt;/p&gt;
      &lt;/div&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>My issue is that I cannot align the text location, and time to the center of a row. Could you help me to fix it? How can I achieve as my expected result (add some icon behind the location and time)?</p>
  
  <p>This is my CSS code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    body{
       font-family: 'Arial', sans-serif;
       font-size: 12px;
       overflow-x: hidden;
      }
      
      a { text-decoration: none; }
      
      /** content display **/
      #view { display: block; padding: 0; margin: 0; height:600px;  overflow:hidden; overflow-y:scroll;}
      #container { display: block; margin-top: 0px; }
      #container ul a li { 
       display: block;
       width: 100%;
       border-bottom: 1px solid #b9b9b9;
       border-top: 1px solid #f7f7f7;
       background: #FFF;
       
      }
      span.jobtype{
        background-color: red;
        border-radius: 5px;
        border: 5px solid red;
        color: #FFFFFF;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;HTML5, CSS3 and JavaScript demo&lt;/title&gt;
  &lt;/head&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"&gt;
  &lt;body&gt;
   &lt;div id="view"&gt; 
    &lt;div id="container"&gt;
     &lt;ul&gt;
      &lt;!-- row 01 --&gt;
      &lt;a href="#"&gt;&lt;li class="clearfix"&gt;
       &lt;div class="w3-row-padding"&gt; 
        &lt;div class="w3-third" style="width:50%"&gt;
         &lt;h2&gt;Wordpress desiger&lt;/h2&gt;
         &lt;p class="desc"&gt;Wordpress and beyond &lt;/p&gt;  
         &lt;span class="jobtype"&gt;Part time&lt;/span&gt;  
        &lt;/div&gt; 
        &lt;div class="w3-third" style="width:30%"&gt;
         &lt;p class="location"&gt;NY.&lt;/p&gt;
        &lt;/div&gt; 
        &lt;div class="w3-third" style="width:20%"&gt;
         &lt;p class="time"&gt;Jan.&lt;/p&gt;
        &lt;/div&gt; 
       &lt;/div&gt; 
      &lt;/li&gt;&lt;/a&gt;
  
      &lt;!-- row 02 --&gt;
      &lt;a href="#"&gt;&lt;li class="clearfix"&gt;
       &lt;div class="w3-row-padding"&gt;  
        &lt;div class="w3-third" style="width:50%"&gt;
         &lt;h2&gt;CEO&lt;/h2&gt;
         &lt;p class="desc"&gt;Think different&lt;/p&gt;
         &lt;span class="jobtype"&gt;Contract&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class="w3-third" style="width:30%"&gt;                              
         &lt;p class="location"&gt;Denver&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="w3-third" style="width:20%"&gt;
         &lt;p class="time"&gt;Feb.&lt;/p&gt;    
        &lt;/div&gt; 
                       &lt;/div&gt;
      &lt;/li&gt;&lt;/a&gt;
     &lt;/ul&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>