Question

我想创建一个带有文本的圆圈div（不仅仅是一行）。这是我想要的善意行为：

我想我可以用

来实现

text-align: center;
vertical-align: middle;

但如果我不知道高度和宽度怎么办？

如果文字正在填充，我希望圆圈展开（最小尺寸为100px）。

Answer 1

So here is the clean Script way

<强> HTML：

<div><span>Your text</span></div>

<强> CSS：

*
{
    margin: 0;
    padding: 0;
}
div
{
    display: inline-block;
    border: 1px solid black;
    border-radius: 50%;
    text-align: center;
}
    div:before
    {
        content: '';
        display: inline-block;
        height:100%;
        vertical-align: middle;
    }

span
{
    vertical-align: middle;
    display: inline-block;
}

<强> JQuery的：

var width = Math.sqrt($("span").width() * $("span").height());
var sqrt2 = Math.sqrt(2);
$("span").height(width);
$("span").width(width);
$("div").width(sqrt2 * width);
$("div").height(sqrt2 * width);

因为单词之间的空格，以及它们如何破解......这个解决方案可能会对小文本造成错误。

相同的HTML＆amp; CSS，脚本中的微小更改

Here's更好的解决方案（效果更好即使是小文本）

<强> JQuery的：

var div = $("div");
var span = $("span");

span.width(Math.sqrt(span.width() * span.height()));
span.width(Math.sqrt(span.width() * span.height()));
div.width(Math.sqrt(2) * span.width());
div.height(div.width());

我重复那一行的原因

span.width(Math.sqrt(span.width() * span.height()));

因为我使用的越多，我在文本周围的范围越大越好。（导致圆圈在文本周围变得更紧）

Answer 2

希望这会以任何方式帮助您，但请注意，它并不能保证所有内容都在圈内！

我会为内容创建一个div和span：

然后我会应用一个CSS来对div进行边界处理，其半径可以使它像圆圈一样。跨度的垂直对齐应将其置于中间。

<div>
<span>Content goes here</span>
</div>

CSS：

div{
border-style:solid;
border-color: black;
width: 300px;
height:300px;
text-align: center;
border-radius: 300px;
vertical-align:middle;
display:table;
padding: 5px;
}

span{
display:table-cell;
vertical-align:middle;
}

您可以在此处测试：http://jsfiddle.net/S3cNW/

Answer 3

这是我能想到的最好的。它不是我想要的100％，但它并不太遥远

HTML

 <div id="balls">
    <div class="ball">
        <div class="message">Some megathoughts</div>
    </div>
   <div class="ball">
        <div class="message">Lorem ipsum whatever</div>
    </div>
    <div class="ball">
        <div class="message">Lorem ipsum superduperlongword</div>
    </div>
    <div class="ball">
        <div class="message">Lorem ipsum whatever</div>
    </div>
    <div class="ball">
        <div class="message">Lorem </div>
    </div>
</div>

SCSS

#balls {
  .ball {
    float: left;
    margin-right: 5px;
    width:50px;
    text-align: center;
    border-radius: 50%;
    vertical-align:middle;
    display:table;
    padding: 8px;
    border: 1px solid #222;
    .message {
      display:table-cell;
      vertical-align:middle;
      border-radius: 50%;
      text-align: center;
      -moz-hyphens: auto;
      -ms-hyphens: auto;
      hyphens: auto;
      word-break:break-all;
    }
  }
}

的Javascript

var fix_size = function(ball){
    var size = ball.height()+10;
    ball.width(size).height(size);
};

$.each($('.ball'), function(index, ball){
        fix_size($(ball));
});

这是一个展示它的JSFiddle http://jsfiddle.net/kDvMp/ 连字符适用于我的应用程序，但不适用于JSFiddle。如果连字符有效，则不需要word-break: break-all;。

Answer 4

对于只为一个单词寻求解决方案的任何人，我发现了一个纯css的语言，但是它需要将单词重复两次-使用一个作为度量。然后通过填充完成比例。

.circlecont{
 position:absolute;
 top:10px;
 left:10px;
 color:#fff;
 box-sizing: border-box;
 color: white;
 font-size:10px;
  
}
.circlecont .circle {
  position:absolute;
  top:0;
  left:0;
  background-color: #CE3838;
  width: calc(100% + 10px);
  height: 0;
  padding-bottom: calc(100% + 10px);
  border-radius:50%;
}
.circlecont .measure{
  opacity:0;
}
.circlecont .centeredtext{
   color:#fff;
   position:absolute;
   top:50%;
   left:50%;
   transform:translate(-50%,-50%);
}

<div class="circlecont"><div class="circle"><div class="centeredtext">1111111111111111</div></div><div class="measure">1111111111111111</div></div>

Answer 5

纯CSS：http://jsfiddle.net/MrPolywhirl/P55FL/

div {
    background-color:#EEE;
    border-style:solid;
    border-color:#000;
    width:200px;
    height:200px;
    border-radius:50%;
    padding:0 4%;
    overflow:hidden;
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}

圆div内的文字。 Div大小调整为内容

5 个答案:

相同的HTML＆amp; CSS，脚本中的微小更改