title: What is the correct way to center a text in a DIV button
body: <p>I've always wondered what the 'best' way to position text inside a div is</p>
  
  <p>1) Put padding on the element surrounding the text and minus the padding from the height/width of the element.</p>
  
  <pre><code>&lt;div class="button"&gt;
      Activate
  &lt;/div&gt;&lt;!-- button --&gt;
  
  .button
  {
      height: 20px;   /* -10px from padding for text */
      width: 90px;    /* -10px from padding for text */
      padding-left:10px;
      padding-right:10px; 
  }
  </code></pre>
  
  <p>2) Put a span around the text, and position it as its own element.</p>
  
  <pre><code>&lt;div class="button2"&gt;
      &lt;span class="button2-text"&gt;
          Activate
      &lt;/span&gt;
  &lt;/div&gt;&lt;!-- button2 --&gt;
  
  .button2
  {
      height: 30px
      width: 100px
  }
  .button2-text
  {
      padding-left:10px;
      padding-top:10px;
  }
  </code></pre>
  
  <p>I always go with 1) because its less code, but I feel 2) is more proper or something Wondering if I'm in the wrong for using method 1) in any way. </p>