Question

如何在css中创建此内容？我无法将圆圈对齐垂直中间。

见图：

＆＃13;

 .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;
 }

＆＃13;

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

＆＃13;

Answer 1

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

.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修复垂直偏移。

结果将成为：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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>

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

6 个答案:

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

6 个答案:

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