CODEWITHSUNDEEP
css
Gandalf
Gandalf

Reputation: 13683

Centering an element in a div

I am trying to center a notification message within a div and i tried top:50% but its not working.I tried to put in some padding i don't like that method.You can see the fiddle here: http://jsfiddle.net/VPdmT/

.message > .inner { 
    padding:22px 0 0 40px; 
    top:50%;
    margin:0 0 22px;
    background-repeat:no-repeat;
    background-position:0 17px;
}

Upvotes: 0

Views: 66

Answers (3)

Grzegorz Grzybek
Grzegorz Grzybek

Reputation: 6237

.message > .inner {
    padding: 0;
    background-repeat: no-repeat;
    background-position:0 17px;
    display: table-cell;
   vertical-align: middle;
}
.message.success {
    color:#0e6200;
    background-color:#d8ffcc;
    border-color:#b3f39f !important;
    display: table;
}

The important part is that div with table-cell display must be inside div with table display.

Upvotes: 1

Registered User
Registered User

Reputation: 3699

.message > .inner { 
    padding:22px 0 0 40px; 
    vertical-align:middle;
    display:table-cell;
    margin:0 0 22px;
    background-repeat:no-repeat;
    background-position:0 17px;
}

Upvotes: 0

Adam Jenkins
Adam Jenkins

Reputation: 55623

The top CSS rule can only be applied to element's whose position is anything other than static. Because you have not declared absolute or relative, then top is ignored.

EDIT: On to the real answer, do this:

.message { display: table; width: 100%; }
.message>.inner { display: table-cell; vertical-align: middle; }

Upvotes: 1

Related Questions