CODEWITHSUNDEEP
htmlcss
DanielJ
DanielJ

Reputation: 769

Can't get a div to Center

I'm not sure what I managed to change but just then one of my div's I was working with would not center, my html is below

<div id="footer">
   <p>foo</p>
</div>

And my css is here,

#footer {
    width: 90%;
    font-size: 16px;
    text-transform: uppercase;
    background: #EBEBEB;
    color: #3B3738;
    padding: 0.3%;

    border-top-right-radius: 2px;
    border-top-left-radius: 2px;
    text-align: center;

    margin: 0 auto;
    display:inline-block;
    font-family: 'Dosis', sans-serif;

    font-weight: 300!important;



}

I have tried numerous solutions already offered but they dont seem to get it to center.

After a bit of testing, it appers it is something to do with this Jquery Script, https://css-tricks.com/snippets/jquery/jquery-sticky-footer/ which is adding the following style onto the footer position: absolute;

EDIT: I solved this by simply adding this to the css, im not really sure why it would work but it did, 

left: 0;
right: 0;

Upvotes: 0

Views: 104

Answers (3)

ThinhLe
ThinhLe

Reputation: 409

If u want a center align element. Use it

.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}

Upvotes: 0

Ashish Patel
Ashish Patel

Reputation: 1041

i think you just have to give vertical-align which align text vertically and width:100% to full width as same as screen width.

#footer {
    width: 100%;
    font-size: 16px;
    text-transform: uppercase;
    background: #EBEBEB;
    color: #3B3738;
    padding: 0.3%;
    vertical-align:middle;

    border-top-right-radius: 2px;
    border-top-left-radius: 2px;
    text-align: center;

    margin: 0 auto;
    display:block;
    font-family: 'Dosis', sans-serif;

    font-weight: 300!important;

}
<div id="footer">
   <p>foo</p>
</div>

Upvotes: 1

ab29007
ab29007

Reputation: 7766

Use display:block; instead of display:inline-block;. That will solve it

If using inline-block is necessary for your layout then I'd recommend using flexbox or float instead.

#footer {
    width: 90%;
    font-size: 16px;
    text-transform: uppercase;
    background: #EBEBEB;
    color: #3B3738;
    padding: 0.3%;

    border-top-right-radius: 2px;
    border-top-left-radius: 2px;
    text-align: center;

    margin: 0 auto;
    display:block;
    font-family: 'Dosis', sans-serif;

    font-weight: 300!important;

}
<div id="footer">
   <p>foo</p>
</div>

Upvotes: 5

Related Questions