2015-03-18 52 views
3

我該如何在css中創建這個?我無法對齊圓圈垂直中間。如何在CSS中創建此形狀? (垂直對齊div)

見圖片:
http://siterepository.s3.amazonaws.com/4015/facebook.png

這裏我所做的事情:所有的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>

+0

你使用任何圖片作爲背景,以創建輪效應?如果是的話,可以使用'background-position:xy',否則你可以使用'margin-top'屬性來對齊圓邊。這裏有你可以使用的小提琴https://jsfiddle.net/5odbwkn5/2/ – 2015-03-18 21:33:42

+2

代替 – 2015-03-18 21:36:30

回答

5

可以使用pseudoelements爲前後易使這種效果:

.container:before { 
    content:' '; 
    display:block; 
    height: 30px; 
    width:30px; 
    background-color:#999; 
    border-radius:15px; 
    position:absolute; 
    left:-15px; 
    top:7px; 
} 
.container:after { 
    content:' '; 
    display:block; 
    height: 30px; 
    width:30px; 
    background-color:#999; 
    border-radius:15px; 
    position:absolute; 
    right:-15px; 
    top:7px; 
} 

這裏是FIDDLE我以你爲例。

編輯:我更新了小提琴以確保圓圈(「之前」和「之後」)位於容器後面。並略微移動元素,使其更像你的形象。

1

首先,你不應該重複的樣式。相反,擴展公共btn樣式與特定的左按鈕。

在這種情況下,您可以在position: absolute的幫助下將相對於父母的位置定位在中間的按鈕,並且top: 50%,margin-top: -25px修復了垂直偏移。

其結果就會變成:

.gray-mid { 
 
    margin-left: 30px; 
 
    width: 400px; 
 
    background-color: #5dd6e4; 
 
    text-align:center; 
 
    position: relative; 
 
} 
 
.gray-btn { 
 
    width: 50px; 
 
    height: 50px; 
 
    border-radius: 50%; 
 
    background: url(../images/ico/9.png) no-repeat center 70%; 
 
    background-color: #5dd6e4; 
 
    right: -20px; 
 
    position: absolute; 
 
    top: 50%; 
 
    margin-top: -25px; 
 
} 
 
.gray-left { 
 
    left: -20px; 
 
    right: inherit; 
 
}
<div class="gray-mid"> 
 
    <div class="gray-btn gray-left"><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>

1

this你在找什麼?

有多種方法可以實現垂直居中。甚至可以很容易地按照指南發佈by Chris Coyier here,您可以隨時參考。

這基本上是當我需要垂直居中時,我去的。

.parent-with-centered-content { 
    position: relative; 
} 

.parent-with-centered-content > .child-element { 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
} 
0

您可以使用這種功能的僞元素,並相應地定位它們。

div { 
 
    position: relative; 
 
    display: inline-block; 
 
    height: 30px; 
 
    width: 200px; 
 
    background: gray; 
 
    margin: 30px; 
 
    text-align: center; 
 
    line-height: 30px; 
 
} 
 
div:before, 
 
div:after { 
 
    content: ""; 
 
    position: absolute; 
 
    height: 20px; 
 
    width: 20px; 
 
    border-radius: 50%; 
 
    background: gray; 
 
    top: 5px; 
 
    z-index: -1; 
 
} 
 
div:before { 
 
    left: -10px; 
 
} 
 
div:after { 
 
    right: -10px; 
 
}
<div>This is some text</div>

0

我沒有嘗試匹配你的字體,但是使用的背景圖片,和一點點的CSS,在這裏你去:

https://jsfiddle.net/z8z3h75h/

<div id="background"> 
<div class="left"> 
FACEBOOK 
</div> 
<div class="right"> 
become a fan 
</div> 

</div> 

#background { 
background-image:url(http://s28.postimg.org/loa285ugt/1_SEOh.jpg); 
    width:409px; 
    height:41px; 
} 
.left { 
    float:left; 
    margin-left:30px; 
    color:white; 
    margin-top:10px; 
} 
.right { 
    float:right; 
    margin-right:40px; 
    color:white; 
    margin-top:10px; 
} 
0

的正確的方法是設置top: 50%並翻譯或設置頁邊距:僞元素

:root{text-align: center;padding: 40px 0 0 0} 
 

 
.container{ 
 
    display: inline-block; 
 
    position: relative; 
 
    padding: 6px 10px 
 
} 
 
.container, .container:before, .container:after{ 
 
    background: #a6a195; 
 
} 
 
.container:before, .container:after{ 
 
    content: ''; 
 
    position: absolute; 
 
    top: 50%; 
 
    margin-top: -10px; /** height/2 **/ 
 
    width: 20px; 
 
    height: 20px; 
 
    border-radius: 50% 
 
} 
 
.container:before{left: -10px}/** width/2 **/ 
 
.container:after{right: -10px} 
 
.container div{display: inline; color: white} 
 

 
.container .txt1{margin-right: 20px} 
 
.container .txt2{font-size: 12px}
<div class="container"> 
 
    <div class="txt1">FACEBOOK</div> 
 
    <div class="txt2">Become a fan</div> 
 
</div>