CSS：如何在中间画文字？
我发现这个例子在计算器上：
使用CSS单独绘制圆
这是伟大的。 但是，我想知道如何修改该示例，以便我可以将文本包含在圆圈中间？
我也发现： 垂直和水平居中CSS文本圈（如iPhone通知徽章）
但由于某种原因，它不适合我。 当我创build以下testing代码时：
<div class="badge">1</div> 而不是一个圆圈，我得到一个椭圆形。 我试图玩弄代码，看看我能如何工作。
的jsfiddle
.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>
如果你的内容要包装并且身高不明，这是你最好的select：
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; }
.badge { height: 100px; width: 100px; display: table-cell; text-align: center; vertical-align: middle; border-radius: 50%; background: yellow; }
<div class="badge">1</div>
我想你想写一个椭圆形或圆圈的文字？ 为什么不是这个？
<span style="border-radius:50%; border:solid black 1px;padding:5px">Hello</span>
对于一个网页devise，我最近给了我一个固定的问题，我不得不解决中心和未知数量的文本，我想我会分享这个解决scheme为其他人看圆/文本组合。
我遇到的主要问题是文本往往会打破界限。 为了解决这个问题，我结束了使用4个div。 一个指定圆的最大（固定）边界的矩形容器。 里面是将div的宽度和高度设置为100％，所以改变父母的大小改变了实际的圆圈的大小。 里面是另一个矩形的div，使用％的，将创build一个文本边界区域，防止任何文本离开圆（大部分）然后最后实际文本和垂直居中的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>
当然，你必须使用标签来做到这一点。 一个为文本创build圈子和其他。
这里有些代码可以帮助你
#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
更新
这里less一些小的变化
您可以使用css3 flexbox 。
HTML：
<div class="circle-with-text"> Here is some text in circle </div>
CSS：
.circle-width-text { justify-content: center; align-items: center; border-radius: 100%; text-align: center; display: flex; }
这将允许你有垂直和水平中间alignment的单行和多行文本。
body { margin: 0; } .circles { display: flex; } .circle-with-text { background: linear-gradient(orange, red); justify-content: center; align-items: center; border-radius: 100%; text-align: center; margin: 5px 20px; font-size: 15px; padding: 15px; display: flex; height: 180px; width: 180px; color: #fff; } .multi-line-text { font-size: 20px; }
<div class="circles"> <div class="circle-with-text"> Here is some text in circle </div> <div class="circle-with-text multi-line-text"> Here is some multi-line text in circle </div> </div>
如果只有一行文本，则可以使用line-height属性，并使用与元素高度相同的值：
height:100px; line-height:100px;
如果文本有多行，或者内容是可变的，那么可以使用padding-top：
padding-top:30px; height:70px;
例如： http : //jsfiddle.net/2GUFL/
如果你正在使用Foundation 5和Compass框架，你可以试试这个。
.sassinput
$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%; }
对我而言，只有这个解决scheme适用于多行文本：
.circle-multiline { display: table-cell; height: 200px; width: 200px; text-align: center; vertical-align: middle; border-radius: 50%; background: yellow; }
一种方法是使用flexbox来alignment中间的文字。 我发现这样做的方式如下：
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。 我在里面用一个导航栏。
.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; }
从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>
