CSS for Aligning Inline Images
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: :cool: :jawa: (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:
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? |
Would this work:
PHP Code:
|
Quote:
|
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:
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:
|
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:
|
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? |
Quote:
|
Hi,
what I do sometimes is use the CSS magic with positioning (NominalAnimal) like this (a working tested copy/paste code) Code:
<body> just remove that "border's" in your real code when used, there are just for an illustration . good luck |
All times are GMT -5. The time now is 04:16 AM. |