0

我有一系列按钮，我需要有文本和不同类别的 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;
}

这是小提琴 http://jsfiddle.net/ebjrc/1/

4

2 回答 2

1

不确定这是否是您的意思，但我会使用灵活的盒子模型。

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在这里

干杯!

于 2013-10-08T20:09:08.880 回答
0

如果我理解正确的话，我认为你的方法会根据需要复杂得多。

请记住，每个锚元素也可以有一个布局。当锚本身可以具有这些属性时，为什么要放置一个锚并在其中提供一个 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

于 2013-10-08T20:13:55.150 回答