html - Text in DIV stuck to the bottom -

I'm running into a strange problem What I'm trying to achieve is the "Expanded Diamond Size" button There is a shape that starts with a triangle, then there is an extended straight mid and second triangle in the end. For this size I came with the following CSS:

  # button-medium {height: 30pt; Status: Relative; Display: Inline-block; Background color: #ff7e39; } # Button-media: {Before content: ""; Status: Relative; Display: Inline-block; Border bottom: 15pt solid transparent; Border-right: 15pt solid # ff7e39; Border-top: 15pt solid transparent; Margin-left: -15pt; } # Button-media: {after content: ""; Status: Relative; Display: Inline-block; Border bottom: 15pt solid transparent; Border-left: 15pt solid # ff7e39; Border-top: 15pt solid transparent; Margin-right: -15pt; }  

It produces the shape it is looking for and it also extends with content. My good and good my problem is that when I want to use this size with some text, this text is stuck under the Span or Divis I am using! I have tried padding, there is a difference between the other divisions inside and nothing is working. This is my html

  & lt ;! DOCTYPE html & gt; & Lt; Html & gt; & Lt; Top & gt; & Lt; Title & gt; & Amp; Degree; & Lt; / Title & gt; & Lt; Link href = "css / 52Noord.css" rel = "stylesheet" & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div align = "center" & gt; Div id = "button-medium" & gt; Span style = "padding-bottom: 3pt" & gt; Text & lt; / Span & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt;  

How can any idea how to achieve this type of shape and there is a centered (vertical and horizontal) text?

You basically type in status: relative Code>: and needs to be changed: to float after span

Update CSS: Enter line-height content within

.  # Button-Medium Term {Line-height: 40px; } # Button-media: {Before content: ""; Swim left; Border bottom: 15pt solid transparent; Border-right: 15pt solid # ff7e39; Border-top: 15pt solid transparent; Margin-left: -15pt; } # Button-media: {after content: ""; float right; Border bottom: 15pt solid transparent; Border-left: 15pt solid # ff7e39; Border-top: 15pt solid transparent; Margin-right: -15pt; }  

Demo: