css - インライン ブロック アンカー タグの垂直方向中央揃え

Question

リンクとボタンを同じように表示する必要がありますが、「ボタン」タグと同じ方法で「a」タグ内のテキストを垂直方向に揃えることができませんでした。タグは複数行のテキストを処理できる必要があることに注意することが重要です (そのため、行の高さは機能しません)。

a,button {
  display: inline-block;
  -moz-box-sizing: border-box;
  width: 150px;
  height: 150px;
  vertical-align: middle;
  border: 1px solid #000;
  text-align: center;
}

以下の jsfiddle を参照してください。

http://jsfiddle.net/bZsaw/3/

ご覧のとおり、span タグを内部に配置し、"display:table" を "a" に設定し、"display:table-cell" と "vertical-align:middle" をspan ですが、それは IE7 では機能しません。

a,button {
    width: 150px;
    height: 150px;
    border: 1px solid #000;
    text-align: center;
}

a {
    display: table;
    -moz-box-sizing: border-box;
}

a span, button span {
    vertical-align: middle;
    text-align: center;
}

a span {
    display: table-cell; 
}

シンプルな CSS のみのソリューションを探しています。

Answer 1

私が見つけた唯一の信頼できる方法は、テキストを垂直に揃えて、テキストが長くなりすぎた場合にテキストの折り返しを許可することです。

外側のコンテナーの行の高さは、内側のコンテナーに指定されている行の高さの少なくとも 2 倍にする必要があります。あなたの場合、それは次のことを意味します。

a {
    width: 150px;
    height: 150px;
    border: 1px solid #000;
    text-align: center;
    line-height: 150px;
    display: block;
}

a span {
    display:inline;
    display:inline-table;
    display:inline-block;
    vertical-align:middle;
    line-height: 20px;
    *margin-top: expression(this.offsetHeight < this.parentNode.offsetHeight ? parseInt((this.parentNode.offsetHeight - this.offsetHeight) / 2) + "px" : "0");
}

すべてをインラインにしたい場合は、a タグに float left を追加します。これは、Aタグにも長いテキストを含む更新された例です.. http://jsfiddle.net/bZsaw/13/

スパンの行の高さを好きなように設定できます。それが親の行の高さの半分未満の場合は、テキストが親コンテナーの幅を超えると中央に配置され、テキストの折り返しが許可されます。これは、私が知る限り、すべての最新のブラウザーで機能します。

Answer 2

テキストがボックスの幅よりも大きくない場合は、行の高さをボックスの高さに等しく設定できます。

line-height:150px;

Answer 3

使用 line-height:150px;してdisplay-inline:block;