title: Text in DIV stuck to the bottom
body: <p>I'm running into a strange problem. What I'm trying to achieve is a "stretched diamond shape" button. This is a shape that starts with a triangle then has an extended straight middle and another triangle at the end.
  For this shape I've come up with the following CSS:</p>
  
  <pre><code>#button-medium {
      height: 30pt;
      position: relative;
      display: inline-block;
      background-color: #ff7e39;
  }
  #button-medium:before {
      content:"";
      position: relative;
      display: inline-block;
      border-bottom: 15pt solid transparent;
      border-right: 15pt solid #ff7e39;
      border-top: 15pt solid transparent;
      margin-left: -15pt;
  }
  #button-medium:after {
      content:"";
      position: relative;
      display: inline-block;
      border-bottom: 15pt solid transparent;
      border-left: 15pt solid #ff7e39;
      border-top: 15pt solid transparent;
      margin-right: -15pt;
  }
  </code></pre>
  
  <p>This produces the shape I am looking for and it even extends with the content. All nice and good.
  My problem is that when I want to use this shape with some text. The text is stuck to the bottom of the span or div that I'm using! I've tried padding, margin other divs inside and nothing seems to work.
  This is my HTML</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;&amp;deg;&lt;/title&gt;
      &lt;link href="css/52Noord.css" rel="stylesheet"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div align="center"&gt;&lt;div id="button-medium"&gt;&lt;span style="padding-bottom: 3pt"&gt;The Text&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Any idea how to achieve this kind of shape and have it contain centered (vertical and horizontal) text?</p>
  
  <p><a href="http://jsfiddle.net/5Xg8X/" rel="nofollow">Here is a JSFiddle.</a></p>