CSS for Aligning Inline Images

devUnix · 01-19-2012, 12:05 PM

Hi,

Before I would post the problem here, I did some googling but could not find an example to address my problem.

Here is the problem statement:

(Look at the above two emoticons. The second one is right-aligned and first one is center-aligned. However, the center image looks okay because the Monk is not on the same line. It is on the second line. How would the center-image get aligned if both the images were on the same line?)

I have two inline images, <img /> tags, just after the <body> tag. The first image (Logo.jpg) is aligned right using CSS "float:right". I want other one (Welcome.jpg) to be center-aligned. HTML's "align=center" or CSS' "float:center" and even HTML's <center> tags do not seem to work properly because I want the second image to sit in the middle (horizontally, of course) at the top of the page irrespective of the other image's location. What is happening is the second image is getting aligned with proportion to the gap between the left edge of the page and the left side/border, the point from where the Logo image begins, of the right-aligned image.

Here is what I am doing:

PHP Code:



<body>

<img src='logo.jpg' width='200px' style='border: 0px; float: right;' />

<center><img src='welcome.jpg' height='100px' style='border: 0px; margin-left: 200px;' /></center>

<hr />

Blah! Blah! Blah! Blah! Blah! 

</body>

I have used "margin-left: 200px;" intentionally so that the Welcome Image can move some more spaces towards the right side so as to look to be sitting in the center of the top of the page.

But that is not desirable. There has to be a proper solution using CSS. I could not find one by Googling on it.

Could anybody address it?

Cedrik · 01-19-2012, 12:42 PM

Would this work:

PHP Code:



<body>
<div style="text-align:center">
<img src='logo.jpg' width='200px' style='border: 0px; float: right;' />
<img src='welcome.jpg' height='100px' style='border: 0px;' />
</div>
<hr />

Blah! Blah! Blah! Blah! Blah! 

</body>

devUnix · 01-19-2012, 03:48 PM

Quote:

Originally Posted by Cedrik

PHP Code:



<div style="text-align:center">

Well, I should have mentioned that that also would not work. It is not working. It is giving the same identical result as center tag and other such techniques I described above.

Cedrik · 01-19-2012, 04:40 PM

Note that I put both images in the div, which puts them in same line

I tested and it works in firefox 8...

edit: I added clear:both in hr, though

PHP Code:



<hr style="clear:both" />

It is just for testing, ideally all those inline style should be in CSS sheet

edit2, maybe I did not understand the requirement

If you want the center image to be in absolute center, there are several ways
For example add negative right margin, with same size as right image width

PHP Code:



<body>
<div style="text-align:center">
<img src="logo.jpg" width="200px" style="border: 0px; float: right;" />
<img src="welcome.jpg" height="100px" style="border: 0px;margin-right:-200px" />
</div>
<hr style="clear:both" />

Blah! Blah! Blah! Blah! Blah! 

</body>

Nominal Animal · 01-20-2012, 04:12 AM

Make sure the container has position:relative; and put the tallest item into it normally. This makes sure the container will get the desired height. Then, use position:absolute;top:0;left:0;width:100%;height:100% sub-container to overlay another container on top of it.

PHP Code:



<div style="position:relative;"> 
 <div align="center"> center </div> 
 <div align="right" style="position:absolute;top:0;left:0;width:100%;height:100%;"> right </div> 
</div>

You can use the z-index:level; property to pick the layering order, higher values are on top, and negative values are in the background. If the window happens to be very narrow, the elements will go on top of each other; the layering order is important then.

devUnix · 01-20-2012, 12:42 PM

I will try what has been pointed out in the above two replies. Thanks!

Nominal Animal: I know you or your presence and ID on this web site for a long time. How are you doing?

Nominal Animal · 01-20-2012, 02:49 PM

Quote:

Originally Posted by devUnix

Nominal Animal: I know you or your presence and ID on this web site for a long time. How are you doing?

Still alive and kickin', so I guess I cannot complain.

lithos · 01-20-2012, 04:54 PM

Hi,

what I do sometimes is use the CSS magic with positioning (NominalAnimal)

like this (a working tested copy/paste code)

Code:

<body>
<div id="wrapper" style="width:962px; height:auto; text-align:center; margin:0 auto; background-color:#ddd;">
<!-- the above line makes a 'frame' for page to the center and align all text to center -->

<div id="page" style="width:762px; height:366px; background-color:#fff; margin:30px auto;">
     <!-- the page line makes a page 'frame' box to the center -->

<div style="position:relative; left:0px; top:0px; margin:0 auto; width:700px; height:120px; border:1px dotted red; z-index:1;">
<img src='linux-monk.gif' width='100px' style='border: 0px; float:right;' />
</div>
<div style="position:relative; left:0px; top:-120px; margin:0 auto; width:700px; height:120px; border:1px dotted green; z-index:2;">
<img src='cool_smiley.gif' width='100px' style='border: 0px;' />
</div>

<hr />

Blah! Blah! Blah! Blah! Blah! 

</div>
</div>

</body>

just remove that "border's" in your real code when used, there are just for an illustration .
good luck