How to Center Photo Posts on Tumblr With CSS

By Ashley Poland

When it comes to managing your Tumblr blog theme, you want it to be just right -- especially if you're creating a theme that mimics the style of your business website. Tumblr's custom theme setting uses a block format for managing posts. To change how your current theme treats photo posts, you'll need to edit the HTML and CSS code within the {Block:Photo} section of your current theme.

Navigate to the customization page for your Tumblr blog at Replace "username" with your own Tumblr username. You can also reach this page by going to your Tumblr blog and clicking "Customize Theme."

Click "Edit HTML" under the thumbnail of your current Tumblr theme. Click "Ctrl-F" to find a particular section of the theme, and then search for "{Block:Photo}". Every theme has a different style of coding posts, so while the block will contain a number of necessary elements, such as the <img> tag to display the image, the look and style of the code will vary.

Add the "style" attribute to the <img> tag. For example, assume your theme shows images with the following code:

<img alt="{PhotoAlt}" src="{PhotoURL-500}"/>

Your modified code would look like this:

<img alt="{PhotoAlt}" src="{PhotoURL-500}" style=""/>

Insert "text-align:center;" into the style attribute:

<img alt="{PhotoAlt}" src="{PhotoURL-500}" style="text-align:center;"/>

Click "Update Preview" to see the changes to your theme in the preview window on the right side of the screen. If you are satisfied with the appearance of your theme, click "Save" to commit the changes.


If your theme specifies a div class for managing images, you can find that class in the theme's stylesheet and then add "text-align:center;" there.