CODEWITHSUNDEEP
htmlcss
user3611017
user3611017

Reputation: 3

How to center a div within a div? (margin: 0 auto; not working)

I have a div that is going to be used as a button, but it doesn't want to center within the larger div!

This is my CSS for the larger div:

.news-quarters{
    width:189px;
    height:300px;
    position:relative;
    float:left;
    padding:10px;
    padding-top:0px;
    margin:10px;
    text-align:left;

}

and for the button div:

.green-button{
    width:auto;
    height:auto;
    position: relative;
    float:none;
    padding:0px;
    margin: 0 auto;
    background: #0A9C00;
    background-size:auto;
    border:1px outset #0A9C00;
    border-radius: 3px;
    -webkit-box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    overflow:auto;
    display:inline-block;

}

.green-button h4{
    text-align:center;
    color:white;
    line-height:1;
    margin:0px;
    font-size:12px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;    
    width:auto;
}

And my html like this:

<div class="news-quarters">
     <div class="green-button">
         <h4>Insert button text here</h4>
     </div>
</div>

Can someone please help? This is severely p***ing me off :(

Thank you!

Upvotes: 0

Views: 1120

Answers (1)

Aurora Arcade
Aurora Arcade

Reputation: 131

In the style .news-quarters change text-align:left to text-align:center;

There are already many existing answers for this problem see How to horizontally center a <div> in another <div>?

Upvotes: 1

Related Questions