CODEWITHSUNDEEP
csscss-shapes
Armando Tavares
Armando Tavares

Reputation: 59

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

How do I create this in css? I'm having trouble aligning the circle divs vertical middle.

See image:
http://siterepository.s3.amazonaws.com/4015/facebook.png

Here what I've done: 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>

Upvotes: 3

Views: 224

Answers (6)

Gildas.Tambo
Gildas.Tambo

Reputation: 22643

The correct way to do that is to set top: 50% and translate or set margin on :pseudo elements

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

Upvotes: 0

Alvaro Men&#233;ndez
Alvaro Men&#233;ndez

Reputation: 9012

you can use pseudoelements as before and after to make easily that effect:

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

here is the FIDDLE I made for you as an example.

Edited: I updated the fiddle to be sure that the circles ("before" and "after") are positioned behind the container. And move slightly the elements to make it more simillar to your image.

Upvotes: 5

arjabbar
arjabbar

Reputation: 6404

Is this what you're looking for?

There are multiple ways which you can achieve vertical centering. There's even a really easy to follow guide posted by Chris Coyier here that you can reference whenever you need.

This is basically what I go to when I need to center something vertically.

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

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

Upvotes: 1

Jason
Jason

Reputation: 396

I did not try to match your fonts, but using background image, and just a little css, here you go:

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

Upvotes: 0

jbutler483
jbutler483

Reputation: 24559

You could use pseudo elements for this kind of functionality, and position them accordingly.

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>

Upvotes: 0

dfsq
dfsq

Reputation: 193271

First of all, you should not duplicate styles. Instead, extend common btn styles with specific for left button.

You can position buttons in the middle with the help of position: absolute relatively to the parent and top: 50%, margin-top: -25px fixes vertical offset in this case.

As the result it will become:

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

Upvotes: 1

Related Questions