3

ボタンのテキストを中央に配置するのは簡単であるべきです。残念ながら、ブラウザーやプラットフォームが異なれば、結果も異なります。

何時間も修正しようとしましたが、どこでも機能するものはありません。

クロム、Mac OS X:


(ソース: d.pr )

クロム、ウィンドウズ 8


(ソース: d.pr )

IE 10、ウィンドウズ 8


(ソース: d.pr )

それで、ええ。定義された高さを設定すると、大きなブロックはIEに表示されませんが、そもそもなぜそれが壊れるのかわかりません。

コードは次のとおりです。

.btn-call-to-action {
  background: #8e8287;
  margin-bottom: 15px;
  color: #f5f3e2;
  padding: 3px 18px 3px 10px;
  margin-top: 6px;
  display: inline-block;
  position: relative;
  border-bottom: none;
  border-radius: 2px;
  white-space: nowrap;

.btn-call-to-action a:after {
  content: url('../img/general-white-arrow.svg?1369574895');
  position: absolute;
  width: 35px;
  right: 15px;
  top: 0px; }

そしてHTML（かなり単純）：

<a href="about.html" class="btn-call-to-action">Want more ?</a>

およびサイト: http://aurelieremia.be/tfa/

// 編集: わかったと思います。まだウィンドウの中央に配置されていませんが、行の高さをリセットすることで、ボタンはもう少し正常に見えます。IE の問題は解決しました。代わりに背景画像を使用してみます (ありがとう、Ana)

4

3 に答える 3

0

このようなものはどうですか：

HTML:

    <a href="about.html">
        <div class="btn-call-to-action">
            <span>Want more?  <img src="http://bkids.sisuweb.co/wp-content/uploads/2013/04/postArrowR.png" />
            </span>
        </div>
    </a>

CSS:

    .btn-call-to-action{
        width:160px;
        height:80px;
        background: #8e8287;
        padding: 3px 18px 3px 10px;
        margin:8px;
        color: #f5f3e2;
        border-radius: 2px;
        display:table;
        text-align:center;
    }

    .btn-call-to-action span{
        display:table-cell;
        vertical-align:middle;
    }

ここでフィドル: http://jsfiddle.net/MQHVE/3/

ここで重要なのは、ラッパー (a タグ) の display:table とコンテンツ (スパン) の display:table-cell を用意することです。次に、スパンに vertical-align:middle を適用できます。

于 2013-06-08T22:13:28.737 に答える