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

Question

如何在 css 中创建它？我在对齐圆 div 垂直中间时遇到问题。

见图：

 .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

首先，你不应该重复样式。相反，使用特定于左按钮的 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 2

您可以像之前和之后一样使用伪元素来轻松实现该效果：

.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作为例子

已编辑：我更新了 fiddle 以确保圆圈（"before" 和 "after"）位于容器后面。并稍微移动元素，使其更像您的图像。

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% 并在 :pseudo 元素上平移或设置边距

: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>

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

How do I create this shape in CSS? (vertically align div)

css

css-shapes

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

How do I create this shape in CSS? (vertically align div)

css

css-shapes

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