Oxymbombuff
New Member
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:\[code\]<div class="element halfcol"> <div class="inner beige-bg fullheight"> <div class="element-content"> <a href="http://stackoverflow.com/questions/14046638/#" class="play-button"></a> </div> </div> </div>\[/code\]And the CSS is:\[code\].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;}\[/code\]Which gives me this:
What I'm looking for is this:
I could just give it a margin top/left to center it, but the \[code\].element\[/code\] container is of variable height and width.Anyone know how to achieve this? 
Thanks in advance!
Thanks in advance!