CODEWITHSUNDEEP
htmlcss
user3831011
user3831011

Reputation: 309

Centering a div element

I have a container that I would like to center but it does not seem to be working. I have set the margins on the right and left to auto but it is stuck on the right hand side and it is getting frustrating. 

.music .pane {
    margin-top: 15%;
    margin-right: auto;
    margin-left: auto;
    max-width: 70%;
    display: inline-block;
    font-size: 110%;
    background: rgba(240,240,253,0.90);
    padding: 22px 32px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -moz-box-shadow: 0 0 18px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 0 18px rgba(0, 0, 0, 0.9);
    -box-shadow: 0 0 18px rgba(0, 0, 0, 0.9);
}

Upvotes: 1

Views: 59

Answers (3)

James Pack
James Pack

Reputation: 858

You just need to make a couple changes to your CSS:

.music.pane {
    background-color: blue;
    margin-top: 15%;
    margin-right: auto;
    margin-left: auto;
    max-width: 70%;
    font-size: 110%;
    background: rgba(240,240,253,0.90);
    padding: 22px 32px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -moz-box-shadow: 0 0 18px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 0 18px rgba(0, 0, 0, 0.9);
    -box-shadow: 0 0 18px rgba(0, 0, 0, 0.9);
}

This centers the div horizontally.

Upvotes: 1

imbondbaby
imbondbaby

Reputation: 6411

You can completely remove inline-block to center the div

.music {
    margin-top: 15%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: 110%;
    background: rgba(240, 240, 253, 0.90);
    padding: 22px 32px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -moz-box-shadow: 0 0 18px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 0 18px rgba(0, 0, 0, 0.9);
    -box-shadow: 0 0 18px rgba(0, 0, 0, 0.9);
}

JSFiddle Demo

Upvotes: 1

codyogden
codyogden

Reputation: 749

You need to leave the div as a block element.

.music .pane {
    margin-top: 15%;
    margin-right: auto;
    margin-left: auto;
    max-width: 70%;
    display: block;
    font-size: 110%;
    background: rgba(240,240,253,0.90);
    padding: 22px 32px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -moz-box-shadow: 0 0 18px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 0 18px rgba(0, 0, 0, 0.9);
    -box-shadow: 0 0 18px rgba(0, 0, 0, 0.9);
}

JS FIDDLE

Upvotes: 0

Related Questions