css:如何在中间画出带文字的圆圈？

Question

我在stackoverflow上找到了这个例子:

仅使用css绘制圆形

哪个好.但我想知道如何修改该示例,以便我可以在圆圈中间包含文本？

我也发现了这一点: 在CSS中以圆圈为中心的文本垂直和水平居中(如iphone通知徽章)

但由于某种原因,它不适合我.当我创建以下测试代码时:

<div class="badge">1</div>

而不是一个圆圈,我得到一个椭圆形状.我正在尝试使用代码来了解如何让它工作.

Answer 1

的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>

Answer 2

如果你的内容要包装并且身高未知,这是你最好的选择:

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>

Answer 3

你可以使用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;
}

这将允许您具有垂直和水平中间对齐的单行和多行文本.

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>

Answer 4

我想你想用椭圆形或圆形写文字？为什么不是这个？

<span style="border-radius:50%; border:solid black 1px;padding:5px">Hello</span>

Answer 5

使用 HTML 标签和不使用 CSS 绘制一个中间带有文本的圆圈

为此，HTML 具有 SVG 标记。如果您不想使用 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>

Answer 6

对于网页设计我最近得到了一个固定的圆圈问题,我必须解决中心和未知数量的文本,我想我会在这里分享解决方案,以寻找圈子/文本组合的其他人.

我遇到的主要问题是文本经常打破圆圈的界限.为了解决这个问题,我最终使用了4个div.一个矩形容器,指定圆的最大(固定)边界.在内部将是绘制圆的div,其宽度和高度设置为100%,因此更改父级的大小会更改实际圆的大小.在里面将是另一个矩形div,使用%'s,将创建一个文本边界区域,防止任何文本离开圆圈(大部分)然后最后是文本的实际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不是我的主要学科,所以我相信它可以改进!

Answer 7

对我来说，只有这个解决方案适用于多行文本：

.circle-multiline {
    display: table-cell;
    height: 100px;
    width: 100px;
    text-align: center;
    vertical-align: middle;
    border-radius: 50%;
    background: yellow;
}

<div class="circle-multiline">Hello Wonderful World</div>

Answer 8

如果只有一行文本，则可以使用line-height属性，其值与元素的高度相同：

height:100px;
line-height:100px;

如果文本有多行，或者内容是可变的，则可以使用padding-top：

padding-top:30px;
height:70px;

示例：http：//jsfiddle.net/2GUFL/

Answer 9

从 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>

Answer 10

当然,你必须使用标签来做到这一点.一个为文本创建圆圈和其他.

这里有些代码可以帮到你

#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

更新

这里的一些变化不那么小

http://jsbin.com/apumik/3/edit

Answer 11

如果你使用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%;
}

Answer 12

HTML：

<div class="circle">
        <p class="inner">HELLO</p>
    </div>

CSS：

.circle { 
background-color: darkgoldenrod;
height: 500px; width: 500px; 
border-radius: 50%;}

.inner {
    position: relative;
    top: 50%;
    text-align: center;
    line-height: 0px;
 
}

第一个 div 类表示正在绘制的圆，您可以更改高度和宽度以适合您的使用。

内部类表示文本的位置，使用positionrelative可以让文本停留在圆圈内。

前 50% 垂直居中，文本对齐水平居中。0 的行高只会让它更清晰或更准确。