将一个圆圈居中放在 div 的中间答案

【问题标题】：Center a circle in the middle of a div将一个圆圈居中放在 div 的中间
【发布时间】：2019-08-22 19:26:55
【问题描述】：

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

所以，基本上我希望在那个灰色 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;
 }

有什么想法吗？

【问题讨论】：

将此代码添加到您的 css 中。 margin: 0 auto; text-align:center;

标签： html css angular-ui-bootstrap

【解决方案1】：

为col-md-1 或CSS 更改添加类d-flex justify-content-center align-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/

【讨论】：

【解决方案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>

【讨论】：