如何对齐圆圈？

Question

我有4个圆圈，必须与中心对齐（垂直和水平）。我怎么能这样啊？

JSFiddle

这是我的模板：

<ion-content has-header="false">
   <div class="dashboard-grey-menu">
     <div class="row no-padding">
       <div class="col"><div class="circle"></div></div>
       <div class="col"><div class="circle"></div></div>
       <div class="col"><div class="circle"></div></div>
       <div class="col"><div class="circle"></div></div>
     </div>
   </div>
 </ion-content>

CSS

.dashboard-grey-menu {
  height: 30vh;
  background-color: #959595;
}

.circle { 
  border-radius: 50%; 
  width: 10vw;
  height: 15vh;
  background-color: #B7B7B7;
}

vertical-align：middle 和 text-align：center 属性无法正常工作。 提前谢谢。

Answer 1

使用flexbox显示类型，您可以轻松实现此目的：

.dashboard-grey-menu {
  height: 30vh;
  background-color: #959595;
  display: flex;
  align-items: center;
}
.row {
  display: flex;
  justify-content: space-around;
  width: 100%;
}
.circle {
  border-radius: 50%;
  width: 10vw;
  height: 15vh;
  background-color: #B7B7B7;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

<div class="dashboard-grey-menu">
  <div class="row no-padding">
    <div class="col">
      <div class="circle">Foobar</div>
    </div>
    <div class="col">
      <div class="circle">Foo</div>
    </div>
    <div class="col">
      <div class="circle">Bar</div>
    </div>
    <div class="col">
      <div class="circle">Baz</div>
    </div>
  </div>
</div>

首先我们将.dashboard-grey-menu设置为display: flex;并告诉它使用justify-content对齐中心的项目（垂直和水平）。然后我们在display: flex;元素上设置.row，并告诉它在圆圈之间平均划分空间。

Answer 2

这是我的方法。它接近但不是100％以X轴为中心。更好的方法是使用 price = soup.find('span',{"class":"price"}) prices =re.search(r'[\d{1,}]+', price.text.strip()).group() ，因为您已经通过离子框架使用它了。

＆＃13;

＆＃13;

flexbox

＆＃13;

  .dashboard-grey-menu {
    height: 30vh;
    background-color: #959595;
    position: relative;
  }

  .circle {
    border-radius: 50%;
    width: 10vw;
    height: 15vh;
    background-color: #B7B7B7;
    margin-left: 6vw;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

＆＃13;

＆＃13;

＆＃13;