CODEWITHSUNDEEP
htmlcsscss-shapes
bomortensen
bomortensen

Reputation: 3396

Centering a CSS3 shape

I'm trying to center an anchor tag which is displayed as a CSS3 shape (a large "play"-arrow) in a div.

My markup is as follows:

<div class="element halfcol">
    <div class="inner beige-bg fullheight">
        <div class="element-content">                       
            <a href="#" class="play-button"></a>                            
         </div>
     </div>
 </div>

And the CSS is:

.element {
   float: left;
   margin-right: 20px;
   margin-bottom: 20px;
 }
.element .inner {
   border: 2px solid #94111e;
   min-height: 50px;
   border-radius: 10px;
   background-color: #fcf9e3;
   height: inherit;
  -moz-box-shadow: 2px 2px 6px #646464;
  -webkit-box-shadow: 2px 2px 6px #646464;
  box-shadow: 2px 2px 6px #646464;
}
.element .inner .element-content {
  padding: 10px 15px;
  height: inherit;
}
.element .inner .no-padding {
  padding: 0px;
}
.element .beige-bg {
  background-color: #fcf9e3;
}
.element .red-bg {
  background-color: #94111e;
}
.element .transparent-bg {
  background-color: transparent;
}
.element .white-bg {
   background-color: #ffffff;
 }
 .element .smallheight,
 .element .doubleheight,
 .element .fullheight {
    overflow-y: hidden;
 }
 .element .smallheight {
    height: 90px;
  }
 .element .doubleheight {
    height: 220px;
  }
 .element .doubleheight .element-content {
   position: relative;
 }
 .element .fullheight {
    height: 350px;
 }
 .element .no-padding {
   padding: 0px !important;
 }
 /**** Shapes ****/
 .play-button {
   display: block;
   margin: 0 auto;
   border-left: 100px solid #94111e;
   border-top: 60px solid transparent;
   border-bottom: 60px solid transparent;
}

Which gives me this:

enter image description here

What I'm looking for is this:

enter image description here

I could just give it a margin top/left to center it, but the .element container is of variable height and width.

Anyone know how to achieve this? :-)

Thanks in advance!

Upvotes: 2

Views: 11926

Answers (2)

mVChr
mVChr

Reputation: 50185

I changed your .play-button class as follows:

.play-button {
   display: block;
   margin: 0 auto;
   border-left: 100px solid #94111e;
   border-top: 60px solid transparent;
   border-bottom: 60px solid transparent;

   margin-left: -50px;  /* half border-left value */
   margin-top: -60px; /* border-top value */
   position: relative; left: 50%; top: 50%;
}​​​​​​​​​​​​​​​​​​

See demo

Upvotes: 0

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196002

You need to make the .element-content be position:relative and then

add

   position:absolute;
   top:50%;
   left:50%;
   margin-top:-60px;
   margin-left:-50px;

to the .play-button

Demo at http://jsfiddle.net/jKs6F/

Upvotes: 3

Related Questions