Question

我有一系列需要文字的按钮和一个不同类的雪佛龙。文本和V形符号都需要在容器内垂直和水平居中，并能够根据字符数进行扩展和收缩。

此外，我需要雪佛龙始终与10px左边的填充文本齐平。

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

感谢您的帮助！

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

这是小提琴 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此处

干杯！

Answer 2

如果我正确地理解你，我认为你的方法会根据需要变得更加复杂。

请记住，每个锚元素也可以有一个布局。为什么你会放置一个锚并在其内部给出一个div，当锚本身可能有这些属性时。这样，您可以在代码中使用更少的元素。

<div class="campaign-1">
    <a href="#" class="submit">
        Tune In
        <span> > </span>
    </a>
</div>

如果你需要在代码中的某个地方编辑它，你可以给你一个额外的课程，我不知道。

现在这也减少了你的css代码：

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

这实际上就是你所需要的一切。

<强> jsFiddle

在包装器中对齐文本和其他跨度

2 个答案: