Question

所以我想显示带圆圈背景的数字。但是我不知道这个数字的长度。当我有两位数时，我当前的解决方案只显示正确的大小。如果我只有一位数，我怎么能确保它会保持不变？

.circled-background{
  background:lightgreen;
  border-radius:50%;
  padding:28px;
}

<h1>1 Digit</h1>
<i class="circled-background">1</i>
<br><br>
<h1>2 Digits </h1>
<i class="circled-background">11</i>
<br><br>
<h1>3 Digits</h3>
<i class="circled-background">111</i>

Answer 1

您已经做了差不多，请执行以下更改以使其正常工作：）

CSS：

  

  .circled-background{
      background:lightgreen;
      border-radius:100%;
      width:80px;
      height:80px;
    }
.circled-background i {
    display:block;
    text-align:center;
     padding-top:35%;
}

   

 <h1>1 Digit</h1>
    <div class="circled-background"><i>1</i></div>
    <br><br>
    <h1>2 Digits </h1>
    <div class="circled-background"><i>11</i></div>
    <br><br>
    <h1>3 Digits</h3>
    <div class="circled-background"><i>111</i></div>

Answer 2

通过使用宽度，您可以实现..

$scope.pload = function () {
        $http.get('/WebServices/manageuser.asmx/showdatamanageuser', {
        }).then(function (response) {
            $scope.getdata = response.data;
            console.log($scope.getdata);
        });
    }

$scope.pload();

.circled-background{
  background:lightgreen;
  border-radius:50%;
  padding:28px;
  width:20px;
  display:inline-block;
  text-align:center;
}

Answer 3

Yo需要与容器宽度相同的高度。

否则圆边界半径：50％;将尝试制作圆圈现任乡绅。

这不会形成圆圈。

当你的数字增长超过5位数时，你会看到你当前的解决方案会破裂。

Answer 4

.circled-background {
    background:lightgreen;
    border-radius:50%;
    height: 100px;
    width: 100px;
    display: table;
}
.circled-background div {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

<div class="circled-background"><div>1</div></div>
<br><br>
<div class="circled-background"><div>11</div></div>
<br><br>
<div class="circled-background"><div>111</div></div>
<br><br>
<div class="circled-background"><div>1111</div></div>

https://jsfiddle.net/ganesh16889/xg576472/

这可能会对你有所帮助。请检查一下。

带圆圈的背景应保持相同的大小

4 个答案: