html - 将一个圆圈居中放在 div 的中间

问题描述

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

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

有任何想法吗？

标签： htmlcssangular-ui-bootstrap

d-flex justify-content-center align-items-center为col-md-1或 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/

html - 将一个圆圈居中放在 div 的中间

问题描述

解决方案

推荐阅读