web-dev-qa-db-ja.com

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

リンクとボタンを同じように表示する必要がありますが、「a」タグ内のテキストを「button」タグと同じ方法で垂直に配置できませんでした。タグは複数行のテキストを処理できる必要があることに注意してください（そのため、行の高さは機能しません）。

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」をスパンですが、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のみのソリューションを探しています。

cssinternet-explorer-7internet-explorer-6
12
Travis

テキストを垂直方向に配置し、長すぎる場合にテキストの折り返しを許可する唯一の信頼できる方法は、2コンテナーアプローチを使用することです。

外側のコンテナーは、内側のコンテナーに指定された行の高さの少なくとも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タグにも長いテキストを追加した更新例を次に示します。 http://jsfiddle.net/bZsaw/13/

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

15
Gats

すべての回答は更新されていません。それらはすべて基本的にハックです。この場合、新しいCSS3機能を使用する必要があります flexbox

a,button {
  -moz-box-sizing: border-box;
  width: 150px;
  height: 150px;
  display:flex;/*CSS3*/
  align-items:center;/*Vertical align*/
  justify-content:center;/*horizontal align*/
  border: 1px solid #000;
}
<a href="#"><span>Testing 1,2,3</span></a>
    <button><span>Testing 1,2,3</span></button>

それはあなたの問題のために働くはずです、align-itemsおよびjustify-contentを設定すると逆の動作になりますflex-direction:vertical、デフォルトはflex-direction:row。

すべてのブラウザがサポートしています caniuse.com/#search=flex

また、無料の優れたコースもチェックしてください flexbox.io/ 彼はこれで最高の先生です

また、CSS3の新機能 css-grid も確認してください。

6
John Balvin Arias

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

line-height:150px;

5
Jrod