我該如何在css中創建這個?我無法對齊圓圈垂直中間。如何在CSS中創建此形狀? (垂直對齊div)
見圖片:
這裏我所做的事情:所有的https://jsfiddle.net/5odbwkn5/
.gray-btn1 {
width: 50px;
height: 50px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: url(../images/ico/9.png) no-repeat center 70%;
background-color: #5dd6e4;
margin-left:-20px;
position: relative;
float:left;
}
.gray-btn {
width: 50px;
height: 50px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: url(../images/ico/9.png) no-repeat center 70%;
background-color: #5dd6e4;
margin-right: -20px;
position: relative;
float:right;
}
.gray-mid {
background-color: #5dd6e4;
text-align:center;
}
<div class="gray-mid">
<div class="gray-btn1"><span class="fa-connectdevelop">left</span>
</div>
<div class="gray-btn"><span class="fa-connectdevelop">right</span>
</div>
<div style="height:100px">middle</div>
</div>
你使用任何圖片作爲背景,以創建輪效應?如果是的話,可以使用'background-position:xy',否則你可以使用'margin-top'屬性來對齊圓邊。這裏有你可以使用的小提琴https://jsfiddle.net/5odbwkn5/2/ – 2015-03-18 21:33:42
代替 – 2015-03-18 21:36:30