web-dev-qa-db-ja.com

HTML-CSSセンターテキストのリンク内での水平および垂直

heightとwidthが200pxのリンクを作成しようとしています。リンクのテキストは、垂直方向と水平方向の中央に配置する必要があります。

これが私のCSSです。

a:link.Kachel {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  display: block;
  text-align: center;
  background: #383838;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
}

そして、このHTMLコード：

<tr>
  <td>
    <a class="Kachel" href="#">Test</a>
  </td>
</tr>

テキストは水平方向に中央揃えされますが、垂直方向には中央揃えされません。

テキストを水平方向と垂直方向の両方に中央揃えする方法はありますか？

htmlcssvertical-alignment
29
user1567896

他のナンセンスをすべて削除し、heightをline-heightに置き換えるだけです

a:link.Kachel{
   width: 200px;
   line-height: 200px;
   display: block;
   text-align: center;
   background: #383838;
}

jsfiddle： http://jsfiddle.net/6jSFY/

58
Eric Goncalves

CSS3では、flexboxを追加要素なしで使用してこれを実現できます。

.link {
    display: flex;
    justify-content: center;
    align-items: center;
}
17
Kilves

テキストが1行のみの場合、line-height:200px;を使用できます-200pxはheight値と同じです。

テキストが複数行にあり、常に同じ数の複数行にある場合は、paddingをline-heightと組み合わせて使用​​できます。 2行の例：

line-height:20px;
padding-top:80px;

このように、2つの行は合計で40ピクセルを占有し、パディングトップはそれらを完全に中央に配置します。それに応じてheightを調整する必要があることに注意してください。

JSFiddleの例 。

複数のリンクがあり、任意の行数がある場合は、それぞれのパディングをfixするためのJavaScriptが必要になります。

5
James Donnelly

追加する小さなポイント。下線を削除すると（text-decoration：none;）、テキストは完全に垂直方向に中央揃えされません。リンクは下線用のスペースを残します。私の知る限り、余分な上部パディングを少し追加する以外は、これをオーバーライドする方法はありません。

2
user2784627

行数（または内部要素の高さ）が不明な場合、display: tableおよびvertical-alignを使用する別のトリックがあります。

.wrapper{
    display: table;
}
.link{
    display: table-cell;
    vertical-align: middle;
}

例

詳細を含む記事全体

1
Strae

たぶんパディングを使用していますか？のような：

padding-top: 50%;
0
user3133486