Search code examples
htmltumblr

Tumblr Header centre


I want to centre my tumblr blog header and my theme was a bit weird so they just pushed everything a bit to the right, but when you zoom out it just stayed left, so I centred everything but my header is still slightly to the left.

My blog is http://lifes-good-but-homework-sucks.tumblr.com/ (you can check the source)

but I think this is the bit I need to edit

div#header{
z-index:555;
float:center;
background-color:transparent;
width: 920px;
height: auto;
margin-top: 30px;
margin-left: 0px;
padding: 30px;
float:center;
text-align: center;}

Solution

  • Your header is too small for your image width, so the image extends beyond it to the right. While the header is technically centered, the content is not as a result (it overflows to the right). If you take the width off of the header element, it will automatically expand to wrap the content.

    Once you have the image properly wrapped in the header, make sure you do the following to center the header div:

    margin-left: auto;
    margin-right: auto;
    

    This automatically calculates and centers block elements (opposed to text-align center which you apply to block elements to center the inline elements within them)

    Now it should properly center.