在 div 中间画一个圆圈

Question

我想用bootstrap来解决这个问题:

所以，基本上我想要那个灰色中间的圆圈 div。

我写了这段代码，但我不知道我错在哪里。

HTML

   <div class="row" style="margin: unset; width: 100%">
       <div class="col-md-1" style="background-color: #E5E5E5; height: 46px; 
          line-height: 46px; text-align: center; opacity: 100%">
            <div class="numberCircleInOut"> 124 </div>
       </div>
       <div class="col-md-11" style="background-color: #FFFFFF; height:46px; 
         line-height: 46px"> Motion timeout 
       </div>
  </div>

CSS

.numberCircleInOut {
  border-radius: 50%;
  height: 38px;
  width: 38px;
  border: 2px solid #484848;
  color: #484848;
 }

有什么想法吗？

Answer 1

为col-md-1添加classd-flex justify-content-center align-items-center或CSS更改

.numberCircleInOut {
  border-radius: 50%;
  height: 38px;
  width: 38px;
  border: 2px solid #484848;
  color: #484848;
  display:flex;
  align-items:center;
  justify-content:center;
 }

<div class="row d-flex justify-content-center align-items-center" style="margin: unset; width: 100%">
<div class="col-md-1 py-2 d-flex justify-content-center align-items-center" style="background-color: #E5E5E5;">
    <div class="numberCircleInOut"> 124 </div>
</div>
<div class="col-md-11" style="background-color: #FFFFFF;">
    Motion timeout
</div>

https://jsfiddle.net/lalji1051/j3axm9f6/9/

Answer 2

为了水平对齐 div，您可以使用 margin-left: auto 和 margin-right: auto。或者你可以只使用 margin: 0 auto 0 auto。请记住，margin 按此顺序设置顶部、右侧、底部和左侧。

.numberCircleInOut {
  border-radius: 50%;
  height: 38px;
  width: 38px;
  border: 2px solid #484848;
  color: #484848;
  margin: 0 auto 0 auto;
 }

 <div class="row" style="margin: unset; width: 100%">
       <div class="col-md-1" style="background-color: #E5E5E5; height: 46px; 
          line-height: 46px; text-align: center; opacity: 100%">
            <div class="numberCircleInOut"> 124 </div>
       </div>
       <div class="col-md-11" style="background-color: #FFFFFF; height:46px; 
         line-height: 46px"> Motion timeout 
       </div>
  </div>

在 div 中间画一个圆圈

Center a circle in the middle of a div

html

css

angular-ui-bootstrap