css - 在包装器中对齐文本和附加跨度

Question

我有一系列按钮，我需要它们具有文本和具有不同类的 V 形。文本和 V 形都需要在容器内垂直和水平居中，并且能够根据字符数扩展和收缩。

此外，我需要人字形始终与文本齐平，并留出 10 像素的左内边距。

我很难将文本和箭头居中。

感谢您的帮助!

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;
}

这是 fiddle http://jsfiddle.net/ebjrc/1/

Answer 1

不确定这是否是您的意思，但我会使用 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;
}

让我知道这是否是您需要的。

-- 编辑

jsFiddle这里

干杯!