如何在CSS中创建此形状？ （垂直对齐div）

Question

我该如何在css中创建这个？我无法对齐圆圈垂直中间。

见图片：

这里我所做的事情：所有的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>

Answer 1

可以使用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我以你为例。

编辑：我更新了小提琴以确保圆圈（“之前”和“之后”）位于容器后面。并略微移动元素，使其更像你的形象。

Answer 2

首先，你不应该重复的样式。相反，扩展公共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>

Answer 3

是this你在找什么？

有多种方法可以实现垂直居中。甚至可以很容易地按照指南发布by Chris Coyier here，您可以随时参考。

这基本上是当我需要垂直居中时，我去的。

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

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

Answer 4

您可以使用这种功能的伪元素，并相应地定位它们。

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>

Answer 5

我没有尝试匹配你的字体，但是使用的背景图片，和一点点的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; 
} 

Answer 6

的正确的方法是设置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>