私はこの例をstackoverflowで見つけました：
それは素晴らしいです。しかし、円の中央にテキストを含めることができるようにその例を変更する方法を知りたいですか？
私はこれも見つけました： CSSで円のテキストを垂直方向と水平方向に中央揃えにします（iPhone通知バッジのように）
しかし、何らかの理由で、それは私にとってはうまくいきません。次のテストコードを作成すると、
<div class="badge">1</div>円ではなく楕円形になります。私はコードをいじって、どのように機能させるかを確認しようとしています。
回答:
.circle {
width: 500px;
height: 500px;
border-radius: 50%;
font-size: 50px;
color: #fff;
line-height: 500px;
text-align: center;
background: #000
}<div class="circle">Hello I am A Circle</div>border-radius:50%;幅と高さに基づいて毎回この属性を変更する必要なしに、コードイベントをよりエレガントで移植性のあるものにすることができる場合;）
コンテンツが折り返されて高さが不明になる場合は、これが最善の策です。
http://cssdeck.com/labs/aplvrmue
.badge {
height: 100px;
width: 100px;
display: table-cell;
text-align: center;
vertical-align: middle;
border-radius: 50%; /* may require vendor prefixes */
background: yellow;
}display: absoluteはalingment を壊します-しかし、簡単な解決策はそれを別のdivの中にラップすることです。
あなたはcss3を使うことができます flexbox。
HTML：
<div class="circle-with-text">
Here is some text in circle
</div>CSS：
.circle-with-text {
justify-content: center;
align-items: center;
border-radius: 100%;
text-align: center;
display: flex;
}これにより、垂直方向と水平方向に中央揃えの1行と複数行のテキストを配置できます。
Webデザインの場合、固定円の問題で中央に配置された不明な量のテキストを解決する必要があり、円とテキストの組み合わせを検討している他の人のためにここで解決策を共有すると思いました。
私が抱えていた主な問題は、テキストがしばしばサークルの境界を超えることでした。これを解決するために、4つのdivを使用しました。円の最大（固定）境界を指定した1つの長方形のコンテナー。その中には、幅と高さを100％に設定して円を描くdivがあるため、親のサイズを変更すると実際の円のサイズが変更されます。その内部には、％を使用してテキストの境界領域を作成する別の長方形のdivがあり、テキストが円を離れないようにします（ほとんどの場合）。最後に、テキストの実際のdivと垂直方向の中央揃え。
それはコードとしてより理にかなっています：
/* Main Container - this controls the size of the circle */
.circle_container
{
width : 128px;
height : 128px;
margin : 0;
padding : 0;
/* border : 1px solid red; */
}
/* Circle Main draws the actual circle */
.circle_main
{
width : 100%;
height : 100%;
border-radius : 50%;
border : 2px solid black; /* can alter thickness and colour of circle on this line */
margin : 0;
padding : 0;
}
/* Circle Text Container - constrains text area to within the circle */
.circle_text_container
{
/* area constraints */
width : 70%;
height : 70%;
max-width : 70%;
max-height : 70%;
margin : 0;
padding : 0;
/* some position nudging to center the text area */
position : relative;
left : 15%;
top : 15%;
/* preserve 3d prevents blurring sometimes caused by the text centering in the next class */
transform-style : preserve-3d;
/*border : 1px solid green;*/
}
/* Circle Text - the appearance of the text within the circle plus vertical centering */
.circle_text
{
/* change font/size/etc here */
font: 11px "Tahoma", Arial, Serif;
text-align : center;
/* vertical centering technique */
position : relative;
top : 50%;
transform : translateY(-50%);
}<div class="circle_container">
<div class="circle_main">
<div class="circle_text_container">
<div class = "circle_text">
Here is an example of some text in my circle.
</div>
</div>
</div>
</div> コンテナーdivの境界線の色のコメントを外して、それがどのように制約されるかを確認できます。
注意事項：あまりにも多くのテキストを入れたり、長すぎる単語や途切れのないテキストを使用したりしても、円の境界を超える可能性があります。完全に不明なテキスト（ユーザー入力など）にはまだ適していませんが、格納する必要のあるテキストの最大量が何であるかが漠然とわかっていて、それに応じて円のサイズとフォントサイズを設定する場合に最適です。もちろん、テキストコンテナーのdivを設定してオーバーフローを非表示にすることもできますが、これは単に「壊れている」ように見える可能性があり、デザインで実際に最大サイズを適切に説明する代わりにはなりません。
これが誰かに役立つことを願っています！HTML / CSSは私の専門分野ではないので、改善できると確信しています！
HTMLタグを使用し、CSSを使用せずにテキストを中央に配置する
このためのSVGタグを持つHTML。CSSを使いたくない場合は、この標準的なアプローチに従うことができます。
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="white" />
Sorry, your browser does not support inline SVG.
<text fill="#000000" font-size="18" font-family="Verdana"
x="15" y="60">ASHISH</text>
</svg>
font-size、font-family、x、とy並びます。Verdanaがインストールされていない場合は、中央に配置されません。を使用x="50%" y="50%" dominant-baseline="middle" text-anchor="middle"しても問題は解決しません。
テキストが1行だけの場合は、要素の高さと同じ値を持つline-heightプロパティを使用できます。
height:100px;
line-height:100px;テキストに複数の行がある場合、またはコンテンツが可変の場合、padding-topを使用できます。
padding-top:30px;
height:70px;もちろん、これを行うにはタグを使用する必要があります。1つは円を作成し、もう1つはテキストを作成します。
ここでいくつかのコードがあなたを助けるかもしれません
#circle {
background: #f00;
width: 200px;
height: 200px;
border-radius: 50%;
color:black;
}
.innerTEXT{
position:absolute;
top:80px;
left:60px;
}
<div id="circle">
<span class="innerTEXT"> Here a text</span>
</div>こちらのライブ例http://jsbin.com/apumik/1/edit
更新
ここでは、いくつかの変更を加えて小さくしています
私にとっては、このソリューションのみが複数行テキストに対して機能しました：
.circle-multiline {
display: table-cell;
height: 200px;
width: 200px;
text-align: center;
vertical-align: middle;
border-radius: 50%;
background: yellow;
}Foundation 5とCompassフレームワークを使用している場合は、これを試すことができます。
.sass入力
$circle-width: rem-calc(25) !default;
$circle-height: $circle-width !default;
$circle-bg: #fff !default;
$circle-radius: 50% !default;
$circle-line-height: $circle-width !default;
$circle-text-align: center !default;
@mixin circle($cw:$circle-width, $ch:$circle-height, $cb:$circle-bg, $clh:$circle-line-height, $cta:$circle-text-align, $cr:$circle-radius) {
width: $cw;
height: $ch;
background: $cb;
line-height: $clh;
text-align: $cta;
@include inline-block;
@include border-radius($cr);
}
.circle-default {
@include circle;
}.css出力
.circle-default {
width: 1.78571rem;
height: 1.78571rem;
background: white;
line-height: 1.78571rem;
text-align: center;
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
zoom: 1;
*display: inline;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}これは、設定が非常に簡単なYouTubeページから取得しました。絶対にメンテナンス可能で再利用可能。
.circle {
position: absolute;
top: 4px;
color: white;
background-color: red;
width: 18px;
height: 18px;
border-radius: 50%;
line-height: 18px;
font-size: 10px;
text-align: center;
cursor: pointer;
z-index: 999;
}<div class="circle">2</div>ここでの解決策のいくつかは、小さなサークルではうまく機能しませんでした。だから私はolの絶対位置を使用してこの解決策を作りました。
SASSを使用すると、次のようになります。
.circle-text {
position: relative;
display: block;
text-align: center;
border-radius: 50%;
> .inner-text {
display: block;
@extend .center-align;
}
}
.center-align {
position: absolute;
top: 50%;
left: 50%;
margin: auto;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
@mixin circle-text($size) {
width: $size;
height: $size;
@extend .circle-text;
}のように使用できます
#red-circle {
background-color: red;
border: 1px solid black;
@include circle-text(50px);
}
#green-circle {
background-color: green;
border: 1px solid black;
@include circle-text(150px);
}https://codepen.io/matheusrufca/project/editor/DnYPMKのデモを参照してください
出力CSSを表示するには、スニペットを参照してください
これを行う1つの方法は、テキストを中央に揃えるためにflexboxを使用することです。私がそれをするために見つけた方法は次のとおりです：
HTML：
<div class="circle-without-text">
<div class="text-inside-circle">
The text
</div>
</div>CSS：
.circle-without-text {
border-radius: 50%;
width: 70vh;
height: 70vh;
background-color: red;
position: relative;
}
.text-inside-circle {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}ここでplnkr：https ://plnkr.co/edit/EvWYLNfTb1B7igoc3TZx?p=preview
このコードを使用すると、応答も速くなります。
<div class="circle">ICON</div>
.circle {
position: relative;
display: inline-block;
width: 100%;
height: 0;
padding: 50% 0;
border-radius: 50%;
/* Just making it pretty */
-webkit-box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.1);
text-shadow: 0 4px 0 rgba(0, 0, 0, 0.1);
background: #38a9e4;
color: white;
font-family: Helvetica, Arial Black, sans;
font-size: 48px;
text-align: center;
}.circle {
width: 500px;
height: 500px;
border-radius: 50%;
font-size: 50px;
color: #fff;
line-height: 500px;
text-align: center;
background: #000
}<div class="circle">Hello I am A CircleHello I am A CircleHello I am A CircleHello I am A CircleHello I am A CircleHello I am A CircleHello I am A CircleHello I am A CircleHello I am A Circle</div>私は他の人からいくつかの答えを組み合わせ、としてfloatとrelativeそれは私が必要な結果を与えました。
HTMLでは、divを使用します。liナビゲーションバーの内部で使用します。
.large-list-style {
float: left;
position: relative;
top: -8px;
border-radius: 50%;
margin-right: 8px;
background-color: rgb(34, 198, 200);
font-size: 18px;
color: white;
}
.large-list-style:before,
.large-list-style:after {
content: '\200B';
display:inline-block;
line-height:0;
padding-top: 50%;
padding-bottom: 50%;
}
.large-list-style:before {
padding-left: 16px;
}
.large-list-style:after {
padding-right: 16px;
}