?
Solved

Center the logo picture

Posted on 2013-10-28
2
Medium Priority
?
221 Views
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" />
</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
Comment
Question by:mdoland
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
2 Comments
 
LVL 30

Accepted Solution

by:
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" />
</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
 
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.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Suggested Courses

801 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