在div中间居中放置一个圆圈

Question

我想通过使用引导程序来解决这种情况：

因此，基本上，我希望在该灰色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

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

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