http://codepen.io/gingerman/pen/VevZLR ( best to look at the code here )
When you open the codepen you'll see that the button is aligned left.
I'm having problems centring the button_container without the point of the button falling off.
I have searched for help on StackOverFlow, but not found a solution.
Thanks :)
CSS
#button_container{
position:absolute;
text-align: center;
top: 68px;
}
#button_join{
display: inline-block;
font-size:14px;
font-weight:bold;
color: #000;
font-family:Helvetica, Arial, sans-serif;
background-color:#fff;
line-height: 31px;
padding-left: 10px;
border-radius:8px 0px 0px 8px;
border:0 0 0 0;
}
#button_point{
float:right;
display: inline-block;
height: 31px;
}
/* Default style, feel free to remove if not needed. */
body, body * {
vertical-align: baseline;
border: 0;
outline: 0;
padding: 0;
margin: 0;
}
/* Div layer for the entire banner. */
#container_dc {
position: absolute;
width: 118px;
height: 200px;
border:1px solid #850f1e;
top: 0px;
left: 0px;
margin: auto;
overflow:hidden;
font-family:Helvetica, Arial, sans-serif;
font-weight:400;
color:#fff;
text-align:center;
}
#content_dc {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-color: #ee1a36;
z-index: 100;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
html
<div id="container_dc">
<div id="content_dc">
<div id="button_container">
<div id="button_join">centre me</div>
<img id="button_point" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/269240/button_end_36_high.png">
</div>
</div>
</div>
</div>
</div>
You can use flex
on parent element with id #content_dc
and remove css rule for element with id #button_container
:
/*REMOVE THIS
#button_container{
position:absolute;
text-align: center;
top: 68px;
}*/
/*check comments in this rule*/
#content_dc {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-color: #ee1a36;
z-index: 100;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
text-align: center;
display: flex;/*add flex*/
justify-content: center; /*add justify-content center*/
align-items: center; /*add align-items center*/
}
#button_join {
display: inline-block;
font-size: 14px;
font-weight: bold;
color: #000;
font-family: Helvetica, Arial, sans-serif;
background-color: #fff;
line-height: 31px;
padding-left: 10px;
border-radius: 8px 0px 0px 8px;
border: 0 0 0 0;
}
#button_point {
float: right;
display: inline-block;
height: 31px;
}
/* Default style, feel free to remove if not needed. */
body,
body * {
vertical-align: baseline;
border: 0;
outline: 0;
padding: 0;
margin: 0;
}
/* Div layer for the entire banner. */
#container_dc {
position: absolute;
width: 118px;
height: 200px;
border: 1px solid #850f1e;
top: 0px;
left: 0px;
margin: auto;
overflow: hidden;
font-family: Helvetica, Arial, sans-serif;
font-weight: 400;
color: #fff;
}
<div id="container_dc">
<div id="content_dc">
<div id="button_container">
<div id="button_join">centre me</div>
<img id="button_point" alt="" title="" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/269240/button_end_36_high.png" />
</div>
</div>
</div>
References