0

テキストと異なるクラスのシェブロンが必要な一連のボタンがあります。テキストとシェブロンは両方とも、コンテナー内で垂直方向と水平方向の中央に配置する必要があり、文字数に基づいて伸縮できる必要があります。

さらに、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/

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 に答える