html - リンク テキストを円の中央に配置する

Question

CSS で作成された cicle が、コンテナー内に完全に配置されています。丸の中のテキストはリンクです。このリンクは、円の内側で垂直方向および水平方向の中央に配置できますか? ブラウザーを 320px 幅に設定して、Firefox と Chrome でテストしています。iOS Safari Mobile でもテストしています。

これは、現時点で私がどこにいるのかを示すために作成したフィドルです。

http://jsfiddle.net/rFZBA/

HTMLは次のとおりです。

<div class="container">
    <div class="circle">
        <a href="#">+</a>    
    </div>
</div>

CSSは次のとおりです。

.container {
    position:relative;
    width:300px;
    height:100px;
    background-color:#999;
}    

.circle {
    position:absolute;
    left:100px;
    top:50px;

    height:1.25em;/** 20px / 16px = 1.25em **/
    width:1.25em;/** 20px / 16px = 1.25em **/

    padding:0.75em;  /** 12px / 16px = 0.75em  **/
    border-radius:1.375em;  /* Half of 44px is  22px :: 22px / 16px = 1.375em **/   
    background-color:#4d90fe;
    color:#FFF;
    box-shadow:1px 1px 2px 2px rgba(0, 0, 0, 0.4);
    text-align:center;  
}

.circle > a {
    color:#FFF; 
    text-decoration:none;
    font-size:2.5em;
    font-weight:bold;
}

Answer 1

.circleを<a>タグに適用するだけです: http://jsfiddle.net/rFZBA/16/

次に、サイズが適切になるように、いくつかの小さな変更を行います。

境界線がテキストの周りにあり、テキストが 2 次サイズ (単一の+) であるため、ここでは自動的に中央に配置されます。また、行の高さを高さと同じにすることを忘れないでください。これにより、垂直方向の中央に配置されます。

Answer 2

line-height と text-align を使用する

.circle > a {
    color:#FFF; 
    text-decoration:none;
    font-size:2.5em;
    font-weight:bold;
line-height:0.625em /* wich is 1.25em (2.5/5X1.25)  or use : 1.25rem; */;
text-align:center;
}

Answer 3

と;を追加display: table;することで、中央に配置できました。ただし、純粋な円ではなく、長方形のオブジェクトが作成されました。これがフィドルです。http://jsfiddle.net/Nirvanachain/rFZBA/.circledisplay: table-cell; vertical-align: middle;.circle a

のフォント サイズ<a>を 16px に変更すると、まさに必要なものが得られます。

Answer 4

このようなことを試しましたか？

http://jsfiddle.net/rFZBA/10/

.circle > a {
    color:#FFF; 
    text-decoration:none;
    font-size:2.5em;
    font-weight:bold;
    display:block;
    position:absolute;
    left:10.5px;
    top:0px;
}