如何将圆形居中对齐？

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 属性无法起作用。

谢谢您的使用。

- Billy Logan

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将其内部项目垂直和水平居中对齐。接着，我们在.row元素上设置了display: flex;，并告诉它均匀地分配圆圈之间的空间。

- Sebastian Olsen

---

也许你可以知道答案。如果我想在圆形内部插入一些文本，我应该怎么做？还有，在中间位置。 - Billy Logan

@BillyLogan flexbox 再次拯救了我们。请查看我的编辑。 :) - Sebastian Olsen

你让我想读一本关于Flexbox的书。非常感谢！ - Billy Logan

col类未被使用。 - Lyubomir Velchev

Answer 2

这是我的方法。它接近但不是在X轴上完全居中。更好的方法可能是使用flexbox，因为你已经通过ionic框架在使用它了。

  .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%);
  }

<link href="http://code.ionicframework.com/1.0.0-beta.14/css/ionic.css" rel="stylesheet"/>
<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>

- damo-s

---

非常感谢您的建议。我会在未来考虑它。 - Billy Logan