[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 231
  • Last Modified:

Center the logo picture

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" />
</div>

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.
0
mdoland
Asked:
mdoland
  • 2
1 Solution
 
Alexandre SimõesManager / Technology SpecialistCommented:
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" />
</div>

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.
0
 
Alexandre SimõesManager / Technology SpecialistCommented:
Another thing, the z-index shouldn't be needed as the logo.png already comes after the backgound.
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now