Aligning Text and additional span in a wrapper - css

Question

I have a series of buttons that I need to have text and a chevron with a different class.
The text and the chevron both need to be centered vertically and horizontally within the container and be able to expand and contract based on the number of the characters.
Additionally I need the chevron to always be flush against the text with a 10px left padding.
I'm having difficulty centering the text and arrow.
Thanks for your help!
section {
margin:2px;
}
.cta {
background-color: #8dc63f;
color: #fff;
font-size: 40px;
margin: 0 auto;
padding: 40px;
text-transform: uppercase;
width: 300px;
text-align: center;
}
.cta-text{
float:left;
text-align: center;
}
.arrow-lm{
float: left;
font-size: 40px;
margin-top: 10px;
padding-left: 10px;
position: relative;
top: -11px;
}
Here's the fiddle
http://jsfiddle.net/ebjrc/1/

Answer 1

Not sure if this is what you mean, but I would use the flexible box model.
section {
margin:2px;
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
}
.cta {
background-color: #8dc63f;
color: #fff;
font-size: 40px;
margin: 0 auto;
padding: 40px;
text-transform: uppercase;
width: 300px;
}
.cta, .cta-text{
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
}
.arrow-lm{
font-size: 40px;
margin-top: 10px;
padding-left: 10px;
position: relative;
}
Let me know if this is what you need.
-- EDIT
jsFiddle here
Cheers!

Answer 2

I think your approach is much more complicaded as needed, if i understanded you correctly.
Remember that every anchor element can also have a layout. Why would you place a anchor and give a div inside it propties of layout when the anchor itself could have those propeties. This way you can use less elements in your code.
<div class="campaign-1">
<a href="#" class="submit">
Tune In
<span> > </span>
</a>
</div>
You can give you span a additional class if you need to edit it somewhere in your code, which i'm not aware of.
Now also this reduces your css code:
div {
background-color: #8dc63f;
color: #fff;
font-size: 40px;
margin: 0 auto;
padding: 40px;
text-transform: uppercase;
width: 300px;
text-align: center;
margin: .5em;
}
div a
{
color: white;
}
That's actually all you need.
jsFiddle