[英]How to center align circles?
I've got 4 circles, which have to be aligned to the center (vertically and horizontally). 我有4个圆圈,必须与中心对齐(垂直和水平)。 How can I ahieve this? 我怎么能这样啊?
Here's my template: 这是我的模板:
<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 CSS
.dashboard-grey-menu {
height: 30vh;
background-color: #959595;
}
.circle {
border-radius: 50%;
width: 10vw;
height: 15vh;
background-color: #B7B7B7;
}
vertical-align: middle and text-align: center properties won't work. vertical-align:middle和text-align:center属性不起作用。 Thank you in advance. 先感谢您。
Using the flexbox
display type, you can easily achieve this: 使用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>
First we set the .dashboard-grey-menu
to display: flex;
首先我们设置.dashboard-grey-menu
来display: flex;
and tell it to align the items in the center (both vertically and horizontally) using justify-content
. 并告诉它使用justify-content
对齐中心的项目(垂直和水平)。 Then we set the display: flex;
然后我们设置display: flex;
on the .row
element, and tell it to equally divide the space between the circles. 在.row
元素上,并告诉它在圆圈之间平均分隔。
Here is my method. 这是我的方法。 It's close but not 100% centered on the X axis. 它接近但不是100%以X轴为中心。 Better might be to use flexbox
as you're already using it anyhow through the ionic framework. 更好的方法是使用flexbox
因为你已经通过离子框架使用它了。
.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.