User User - 5 months ago 17
CSS Question

button ignores parent div and won't align

I can't quite get to the bottom of this: it seems that my parent div is being ignored by the browser when I want to align it. Hopefully any of you guys can get it! Thanks!

This is my parent div:

#button-subheading {
height: auto;
width: auto;
text-align: center;
margin-left: auto;
margin-right: auto;

and this is my child:

.button, button {
color: #fff !important;
font-size: -63px;
font-family: "CentraleSans-Bold","Helvetica Neue",Helvetica,Arial;
line-height: 265%;
text-decoration: none;
background-color: #167de4;
padding: 0 20px;
position: absolute;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-background-clip: padding;
-moz-background-clip: padding;
border: 1px solid #1d4ea4;
-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.23),inset 0 1px 0 rgba(255,255,255,0.19);
background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #3669ef), color-stop(100%, #4f95f4));
background-image: -webkit-linear-gradient(bottom, #3669ef 0%,#4f95f4 100%);
background-image: -moz-linear-gradient(bottom, #3669ef 0%,#4f95f4 100%);
background-image: -o-linear-gradient(bottom, #3669ef 0%,#4f95f4 100%);
background-image: linear-gradient(bottom, #3669ef 0%,#4f95f4 100%);
text-shadow: 0 1px 2px rgba(0,0,0,0.75);
white-space: nowrap;
text-overflow: ellipsis;

when I try to implement it trough this HTML it gets stuck on the left of the screen:

<div id="button-subheading">
<div class="button" href="#" style="opacity: 1;">Get started with a free 30-day trial</div>


There are already a couple answers here, and even a chosen one. But I suppose I'll share my alternate solution anyways, so there are even more options available to you.

The way I solved with was by changing one line of CSS under the .button, button styles, turning position:absolute to display:inline-block. Absolute positioning can be very difficult to properly work into a layout, since it basically removes the element from the "flow" of the HTML.

Also, another minor thing I think might be helpful to you, is to use an anchor (a) element for the button, rather than a div, since clicking on an anchor would actually bring you to the specified href.

Here's a JSfiddle:

Regardless though, glad you got an answer to your question!