1

text-align center と margin auto を試しましたが、どちらも機能せず、センタリングに「マージンハック」を使用したくありません..

http://jsfiddle.net/st9AM/1/

.circle{

float: left;
position: relative;
width: 120px;
height: 120px;
border-radius: 50%;
border: 2px solid #DDD;
}

.inner{
float: left;
position: relative;
width: 60px;
height: 60px;
border-radius: 50%;
border: 2px solid #DDD;
}
4

5 に答える 5

7

まず第一に、使用margin: auto;はハックではありません

また、円の中心に円を配置するには、 などの配置テクニックを使用できますposition: absolute;。ここではposition: absolute;、内側の円で使用し、 andの値を持つプロパティを割り当てtopて、 andを使用して、andの 1/2 を差し引いています。left50%margin-topmargin-leftheightwidth

なぜ差し引くの32pxですか？すでに述べたように、合計のちょうど半分を差し引いているwidthため、これには、要素をおよびそれぞれに設定する要素のheightも含まれます。border2px64pxheightwidth

シンボルには、プロパティを使用しています。これvertical-alignは、垂直方向に配置される単一の文字しか表示されないためです (言われませんでしたが、技術的には、探している形状を推測できます)。代わりに、使用することもできますが、コンテナーを設定する必要があります。への要素+line-heightvertical-align: middle;display: table-cell;

デモ

最後になりましたがspan、内側の円の内側にタグをネストする必要がありますdiv。

.circle{
   float: left;
   position: relative;
   width: 120px;
   height: 120px;
   border-radius: 50%;
   border: 2px solid #DDD;
}

.inner{
   text-align: center;
   line-height: 60px;
   position: absolute;
   top: 50%;
   margin-top: -31px;
   left: 50%;
   margin-left: -31px;
   width: 60px;
   height: 60px;
   border-radius: 50%;
   border: 2px solid #DDD;
}
于 2013-10-14T05:10:41.970 に答える
3

これがよりクリーンなソリューションです。

1 つの HTML 要素のみを使用します。

HTML:

<div class='circle'></div>

CSS:

*
{
    margin: 0;
    padding: 0;
}
.circle, .circle:after
{
    border-radius: 50%;
    border: 2px solid #DDD;
    text-align: center;
}
.circle
{
    width: 120px;
    height: 120px;
    font-size: 0;
}
.circle:before {
    content:'';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.circle:after
{    
    content:'+';
    font-size: 20px;
    padding: 20px 0; /* 2*padding + font size = innerCircle height*/
    display: inline-block;
    vertical-align: middle;
    width: 50%;
}
于 2013-10-14T07:15:02.400 に答える
1

内側の円に「float: left」がありましたが、これは必要ありませんでした

//float: left;

働くフィドル

于 2013-10-14T05:15:12.003 に答える