web-dev-qa-db-ja.com

インラインブロック内のテキストを垂直方向に中央揃え

スタイル付きハイパーリンクを使用して、Webサイト用のボタンを作成しようとしています。私はボタンを私が望むように見えるようにすることができました。テキスト（下のソースコードの「リンク」）を垂直方向の中央に配置できません。

残念ながら、2番目のボタンで示されているように複数行のテキストがある場合があるため、line-heightを使用して垂直方向に中央揃えすることはできません。

私の最初の解決策はdisplay: table-cell;ではなくinline-blockを使用することでした。これにより、Chrome、Firefox、Safariで問題がソートされますが、Internet Explorerではソートされません。

57px x 100pxinline-block内のリンクテキストを垂直方向に中央揃えし、複数行のテキストに対応させるにはどうすればよいですか？前もって感謝します。

CSS：

.button {
    background-image:url(/images/categorybutton-off.gif);
    color:#000;
    display:inline-block;
    height:57px;
    width:100px;
    font-family:Verdana, Geneva, sans-serif;
    font-size:10px;
    font-weight:bold;
    text-align:center;
    text-decoration:none;
    vertical-align:middle;
}
.button:hover {
    background-image:url(/images/categorybutton-on.gif);
}
.button:before {
    content:"Click Here For\A";
    font-style:italic;
    font-weight:normal !important;
    white-space:pre;
}

HTML：

<a href="/" class="button">Link</a>
<a href="/" class="button">Link<br />More Details</a>
htmlvertical-alignmentcenteringcss
25
Josh Bowe

このように、テキストをスパン（中央）でラップし、その直前（センター）に別の空のスパンを書き込みます。

HTML：

<a href="..." class="button">
  <span class="Centerer"></span>
  <span class='Centered'>Link</span>
</a>

[〜＃〜] css [〜＃〜]

.Centered
{
    vertical-align: middle;
    display: inline-block;
}

.Centerer
{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

こちらをご覧ください： http://jsfiddle.net/xVnQ6/

19
avrahamcool

@avrahamcoolに感謝します。

少しアップグレードします。冗長な.Centererスパンをcssに置き換えることができます

.button:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

こちらのデモをご覧ください： http://jsfiddle.net/modernweb/bXD2V/

注：これは、「コンテンツ」属性のテキストでは機能しません。

32
Rafal Gałka