首页 \ 问答 \ 圈子周围的圈子与文本(Circles Around Circles With Text In)

圈子周围的圈子与文本(Circles Around Circles With Text In)

我怎么做“是的!!!” 以下代码中的文字显示在圆圈的中心?

我已经尝试添加填充,但它只是将文本向右移动,即填充不是在所有方向均匀应用。

这是我的代码( http://jsfiddle.net/yxVkk/646/

HTML: -

<div id="big-circle" class="circle big">
<div class="circle one"><span style="top: -50px;">YES!!!</span></div>
<div class="circle two"></div>
<div class="circle three"></div>
<div class="circle four"></div>
<div class="circle five"></div>
<div class="circle six"></div>
</div>

CSS: -

.circle {
    border-radius: 50%;
    width: 100px;
    height: 100px;
    background-color: red;
    display: inline-block;
    position: absolute;
}

.circle.big {
    width: 150px;
    height: 150px;
    background-color: blue;
    margin: 100px;
    }

    .one {
    left: -100px;
    top: -100px;
    }

    .two {
    top: -60px;
    left: 50px;
    }

    .three {
    right: -25px;
    top: -25px;
}


    .four {
        left: -25px;
        bottom: -25px;
        }

        .five {
        bottom: -60px;
    left: 50px;
    }

    .six {
    right: -25px;
    bottom: -25px;
    }

注意:我更愿意在没有JS的情况下完成此操作,如上例所示。


How would I make the "yes!!!" text in the following code appear centred in the circle?

I've tried adding padding, but it just moves the text to the right, i.e., the padding is not applied evenly in all directions.

Here's my code (http://jsfiddle.net/yxVkk/646/)

The HTML:-

<div id="big-circle" class="circle big">
<div class="circle one"><span style="top: -50px;">YES!!!</span></div>
<div class="circle two"></div>
<div class="circle three"></div>
<div class="circle four"></div>
<div class="circle five"></div>
<div class="circle six"></div>
</div>

The CSS:-

.circle {
    border-radius: 50%;
    width: 100px;
    height: 100px;
    background-color: red;
    display: inline-block;
    position: absolute;
}

.circle.big {
    width: 150px;
    height: 150px;
    background-color: blue;
    margin: 100px;
    }

    .one {
    left: -100px;
    top: -100px;
    }

    .two {
    top: -60px;
    left: 50px;
    }

    .three {
    right: -25px;
    top: -25px;
}


    .four {
        left: -25px;
        bottom: -25px;
        }

        .five {
        bottom: -60px;
    left: 50px;
    }

    .six {
    right: -25px;
    bottom: -25px;
    }

Note: I would prefer to accomplish this without JS, as in the above example.


原文:https://stackoverflow.com/questions/24519525
更新时间:2020-05-10 16:05

最满意答案

删除style="top: -50px;" 并添加

.one>span{
    display:block;
    width: 100%;
    line-height:20px;
    font-size: 20px;
    margin-top: 40px;
    text-align:center
}

小提琴: http//jsfiddle.net/yxVkk/648/


Remove style="top: -50px;" and add

.one>span{
    display:block;
    width: 100%;
    line-height:20px;
    font-size: 20px;
    margin-top: 40px;
    text-align:center
}

Fiddle: http://jsfiddle.net/yxVkk/648/

2014-07-01

相关问答

更多

如何创建CSS / JavaScript圈子网格(How to create CSS/JavaScript circles grid)

根据内容大小进行缩放的圆圈。 这是您首先需要解决的问题,因为您无法在不知道尺寸的情况下将它们放置在任何地方。 自然,DIV的大小首先按宽度扩展,然后按高度扩展。 也就是说,在移动到高度限制之前,必须首先使用容器的最大宽度。 正因为如此,如果不使用相对平均,相等半径的圆形刻度可能会相当困难。 相对平均是根据限制您内容的合作伙伴的存在区域找到您的高度/宽度的平均尺寸。 例如: 可以使用javascript检测绑定内容的DIV的宽度和高度。 假设您发现这些属性也分别为200px x 20px。 你的总面 ...

fullpage.js - 扩展圈子背景掩盖了文本(fullpage.js - expanding circles background cover up the text)

你好在你的文件中添加这个css,以删除应用的CSS转换及其工作 #fullpage { -webkit-transform: none !important; transform: none !important; } 在你的情况下试试这个 #fullpage { z-index: 2; } hello add this css in your file for remove applied CSS transformation and its work #fullpage { - ...

脚本保持“在圈子里跑”(Script keeps “running in circles”)

代码似乎工作正常。 但为了以防万一,因为你的每个功能都是不必要的。 如果你在jQuery元素中执行on函数,他会将函数绑定到每个元素,并且每个元素都有所不同,因此对于性能问题,请执行以下更改: if ($(window).width() < 801) { $(".faqttlitem").on('click', function () { if ($(this).hasClass('activefaq')) { $(this).removeClass('a ...

将图像添加到SVG圈子(Adding image to SVG circles)

你有一个错字。 fill="url(#image1);" 应该 fill="url(#image1)" 删除分号。 https://jsfiddle.net/baapu6wz/1/ You have a typo. fill="url(#image1);" should be fill="url(#image1)" Remove the semicolon. https://jsfiddle.net/baapu6wz/1/

在Android UI中添加圈子?(Adding circles to android UI?)

要执行所需操作,您需要采取的一般步骤是将背景应用于父布局,然后将textview作为子视图添加到该视图中。 对于简单的形状,请阅读XML drawables: https : //developer.android.com/guide/topics/resources/drawable-resource.html#Shape 首先创建一个名为circle的XML文件并放在res / drawable中 <?xml version="1.0" encoding="utf-8"?> <shape x ...

这个涉及圈子的公式是什么?(What is this formula involving circles trying to do?)

math.pi有无意义的用法 - 结果不依赖于它。 a = x/R = Cos(Fi) ,其中Fi是(坐标原点 - 起点)矢量的方向角,如果R是以原点为中心的弧半径 (Cos(Fi)否定正宽度值) There is nonsense usage of math.pi - result doesn't depend on it. a = x/R = Cos(Fi), where Fi is direction angle of (coordinate origin - starting point) ...

如何在Google地图中使用圈子代替标记(How can I use Circles instead of markers with my Google Maps)

您基本上只需要使用SVG循环路径定义对象并将其分配给标记的icon属性。 这是我做过类似事情的一大块代码。 请注意,您需要使用path定义和/或scale属性来获得所需的结果,但这将演示整个配方: // Somewhere in your code you define an object you'll use as an icon. // You only need to instantiate this once. var circleIcon = { path: 'M 0, 0 m ...

谷歌地图圈子动画(Google Maps Circles Animation)

您只为最后创建其圆圈的“城市”创建setInterval函数。 解决此问题的一个选项是使用函数闭包来关联setInterval函数和圆: for (var city in citymap) { createCircle(citymap[city], map); } function createCircle(city, map) { var _radius = 500; var rMin = _radius * 4 / 5; var rMax = _radius; var d ...

与css的圈子列表(List of circles with css)

在CSS中使用float:left 。 ul { list-type:none; } .menu { position: relative; display: block; width:1em; height:1em; border-radius:50px; color:#fff; background:#000; float:left; /* use this */ } <div class="left-menu"> <ul> <li><span><a cl ...

圈子周围的圈子与文本(Circles Around Circles With Text In)

删除style="top: -50px;" 并添加 .one>span{ display:block; width: 100%; line-height:20px; font-size: 20px; margin-top: 40px; text-align:center } 小提琴: http : //jsfiddle.net/yxVkk/648/ Remove style="top: -50px;" and add .one>span{ ...

相关文章

更多

最新问答

更多
  • 如何保护Solr只允许SELECT请求给用户并禁止其他任何东西?(How to secure Solr to allow SELECT request to only users and disallow anything else?)
  • XPath表达式无效/错误TFHpple SWIFT 1.2(XPath Expression not working/incorrect TFHpple SWIFT 1.2)
  • css3 3D变换不能平滑地制作动画(css3 3D transform doesn't animate smoothly)
  • 运行时错误'91'和Outlook.Application = <对象变量或没有设置块变量>?(Run-time error '91' & Outlook.Application = Object variable or With block variable not set?)
  • 慢的webservice问题(Slow webservice problem)
  • textview的不正确对齐方式(Improper alignment of a textview)
  • 在第一步“Hello World”中出现Java错误(Cannot run “Hello World” program in Eclipse)
  • 为什么十六进制地址是14个字符?(why the hex address is 14 character?)
  • 如何在Python中的不同类中使用变量?(How to use variable in different classes in Python?)
  • asp:GridView HYPERLINKFIELD - datanavigateurlformatstring中的asp代码(asp:GridView HYPERLINKFIELD - asp code inside datanavigateurlformatstring)
  • 关于adaboost算法(About adaboost algorithm)
  • 在Matlab上内置图像(Built in Images on Matlab)
  • java swing:输入键事件时焦点丢失(java swing: Focus lost on enter key event)
  • C#中的通用约束,T是相同的TSomethingElse,对吧?(Generic constraints in C#, T is the same TSomethingElse, right?)
  • 从mybatis中的光标获取数据(Fetching data from cursor in mybatis)
  • 在运行时从XML构建对象的最佳方法(Best way for building objects out of XMLs at runtime)
  • 在整个窗口中拉伸sf :: Sprite(Stretch sf::Sprite across entire window)
  • Selenium Node API Web驱动程序等待超时处理程序(Selenium Node API web driver wait timeout handler)
  • 函数使用并且是map的一部分(循环依赖?)(Function uses and is part of map (circular dependency?))
  • 是否可以在C ++ 14中使用可选模板参数创建类型元组?(Is possible to make a tuple of types with optional template parameters in C++14?)
  • PHP从窗帘后面打印/ f(PHP prints /f from behind the curtains)
  • JFrame的contentPane的LayoutManager(LayoutManager of JFrame's contentPane)
  • 用于Instagram Feed的图像滚动(Image Roll Overs for Instagram Feed)
  • 如何显示拉伸字体(双倍宽度/高度)?(How to display stretched font (double width/height)?)
  • 文件操作API在fileapi.h和stdio.h中的WP8差异?(WP8 differences between file manipulation APIs in fileapi.h and stdio.h?)
  • 保存失败后Rails没有回滚事务()(Rails not rolling back transaction after failed save())
  • jqgrid中的分页问题与数组数据(Pagination problem in jqgrid with array data)
  • 重定向时,通过其他页面上的URL调用javascript函数(Call javascript function through url on otherpage while Redirecting)
  • 如何使用InvokeCommandAction调用我的方法并传入参数?(How do I go about using InvokeCommandAction to call a method of mine and pass in parameters?)
  • Jquerymobile按钮仅显示页面的第一个外观(Jquerymobile buttons are shown only first apperance of the page)