45

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>

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

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

4

7 に答える 7

84

height他のすべてのナンセンスを削除し、単に置き換えますline-height

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

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

于 2013-02-13T20:39:39.860 に答える
43

CSS3 では、余分な要素なしでフレックスボックスを使用してこれを実現できます。

.link {
    display: flex;
    justify-content: center;
    align-items: center;
}
于 2018-06-04T07:35:44.827 に答える
6

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

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

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

このようにして、2 つの行は合計 40px を占め、上部のパディングによって完全に中央に配置されます。それに応じて を調整する必要があることに注意してくださいheight。

JSFiddle の例。

複数のリンクがあり、任意の数の行がある場合は、それぞれのパディングを修正するためにいくつかの付随する JavaScript が必要になります。

于 2013-02-13T20:39:48.070 に答える