Center the logo picture

Posted on 2013-10-28
Medium Priority
Last Modified: 2013-10-29
I have some html that looks like this:

<div style="position:relative;">
     <img style="position:absolute; left:0; top:0;" src="background.png" />
     <img style="position:absolute; left:0; top:0;z-index:1" src="logo.png" />

How can I get the logo.png to be centered to the middle?

How can I calibrate where I want it in the up down diretction? I don't want to have it in the absolut top of the page, as with the background.png, but pushed down abit.
Question by:mdoland
  • 2
LVL 30

Accepted Solution

Alexandre Simões earned 2000 total points
ID: 39607922
You have to play with the image width.

So first thing get the image width. For the purpose of this example I'll assume it's 100px.
<div style="position:relative;">
     <img style="position:absolute; left:0; top:0;" src="background.png" />
     <img style="position:absolute; left:50%; top:10px;margin-left:-50px;z-index:1" src="logo.png" />

Open in new window

So lets see what I did...
Still position absolute inside a relative positioned container like you had.
Left: 50%; will put the image to start at the center of the container
margin-left:-50px; will move half of the image size to the left making it perfectly centered.

So, this negative margin-left if the main trick here and is where you need to know the correct size of the image so you can divide it in half and apply here.

Another foot note, use CSS files instead of in-line style.
LVL 30

Expert Comment

by:Alexandre Simões
ID: 39607929
Another thing, the z-index shouldn't be needed as the logo.png already comes after the backgound.

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

624 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question