如何在CSS中創建此形狀？ （垂直對齊div）

Question

我如何在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> 

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修復了這種情況下的垂直偏移。

結果它將成為：

 .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

這是你在找什么？

有多種方法可以實現垂直居中。 Chris Coyier在這里發布了一個非常容易遵循的指南，您可以隨時參考。

這基本上是我需要垂直居中的時候。

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