私はかなり長い間これを理解しようとしてきましたが、うまくいくように見えますが、垂直方向に整列しません。同じテーブルセルの回答に戻りながら、ほとんどのソリューションを試しました。ただし、ここでは機能しません。テキストは上部に配置されます。これが機能しない理由とその修正方法を知っている人はいますか?
jsfiddle:
HTML:
<a href="#">Open Up</a>
CSS:
a {
position: absolute;
top: 0;
left: 0;
width: 240px;
height: 240px;
border-radius: 120px;
-moz-border-radius: 120px;
-webkit-border-radius: 120px;
-khtml-border-radius: 120px;
font-size: 20px;
line-height: 1;
text-decoration: none;
text-align: center;
margin: 0 auto;
display: table-cell;
vertical-align: middle;
}
a:hover {
color: #000;
text-decoration: none;
background-color: rgba(0,0,0,0.8);
opacity: 1;
display: block;
}
どのように見えるか (左: 通常 | 右: ホバー):
PS 円全体をリンクとしてクリックできるようにするため、div を使用できません。ありがとう