html - 在 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 或 CSS 更改添加类 d-flex justify-content-centeralign-items-center

.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/