title: How do you add multile vendor prefixes to one css property?
body: <p>I have an image inside .img-container . I would like the image to center within the container.</p>
  
  <pre><code>        &lt;div class='col-xs-12 col-sm-4 col-lg-4 img-container'&gt;
               &lt;img class="img-responsive img-about" src='img/About5001000.jpg'&gt; 
          &lt;/div&gt;
  </code></pre>
  
  <p>How do you code the css the handle different browsers. The only way I know how is to code them (-moz-center, -webkit-center) individually:</p>
  
  <pre><code>.img-container {
      padding-right: 0px;
      padding-left: 0px;
      text-align: -moz-center;
  }
  </code></pre>
  
  <p>or</p>
  
  <pre><code>.img-container {
      padding-right: 0px;
      padding-left: 0px;
      text-align: -webkit-center;
  }
  </code></pre>
  
  <p>this doesn't for neither Firefox nor Safari nor Chrome:</p>
  
  <pre><code>.img-container {
    padding-right: 0px; 
    padding-left: 0px;
    text-align: center;
  }
  </code></pre>
  
  <p>I'm sure there is a solution that works universally. Thanks!</p>