我在stackoverflow上找到了以下示例:
太好了 但是我想知道如何修改该示例,以便可以在圆圈中间添加文本?
我还发现了这一点: 在CSS中以圆形为中心垂直和水平居中放置文本(例如iPhone通知徽章)
但由于某种原因,它对我不起作用。当我创建以下测试代码时:
<div class="badge">1</div>
而不是圆形,而是椭圆形。我正在尝试使用代码,以查看如何使它工作。
我在stackoverflow上找到了以下示例:
太好了 但是我想知道如何修改该示例,以便可以在圆圈中间添加文本?
我还发现了这一点: 在CSS中以圆形为中心垂直和水平居中放置文本(例如iPhone通知徽章)
但由于某种原因,它对我不起作用。当我创建以下测试代码时:
<div class="badge">1</div>
而不是圆形,而是椭圆形。我正在尝试使用代码,以查看如何使它工作。
Answers:
.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
打破了这种苦痛-但简单的解决方案是将其包装在另一个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;
}
这将使您可以在垂直和水平中间对齐单行和多行文本。
对于网页设计,我最近不得不在固定圆圈问题中解决居中和未知数量的文本,我想在这里与其他寻求圆圈/文本组合的人分享解决方案。
我遇到的主要问题是文本经常会打破圈子的界限。为了解决这个问题,我最终使用了4个div。一个指定矩形的最大(固定)边界的矩形容器。在其内部将是div,该div绘制其宽度和高度设置为100%的圆,因此更改父级的大小将更改实际圆的大小。在里面是另一个矩形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"
也不能解决问题。
如果只有一行文本,则可以使用line-height属性,该属性的值与元素的高度相同:
height:100px;
line-height:100px;
如果文本有多行,或者内容是可变的,则可以使用padding-top:
padding-top:30px;
height:70px;
当然,您必须使用标签来做到这一点。一个用于创建圆,另一个用于创建文本。
这里有些代码可能对您有帮助
#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
一种方法是使用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;
}