CSS - Need To Center Image To Nest In.

How would I center an image vertically in a div that has varying height? Normally I would set a line-height and then a vertical-align but the container is of varying size dependent on content . The only way I can think of is to make the image a background and do background-position: center center;

Is that the only workaround?

I'm working with a php script that i purchased. In my admin_login.php page is the entry for the image and my entry from my layout.css page. I'm only seeing half my background image. I cant seem to get it centered.

admin_login.php...

5.<div id="container_login">
6. <a href="http://www.myglobalpnr.com" target="_blank" id="login_logo"><img src="<?php echo IMG_PATH; ?>login_logo.jpg" alt="Property Listing Script by ClassifiedsGeek.com" /></a>
7. <div id="main_login">
8. <?php require $content_tpl; ?>
9. </div> <!-- main_login -->
10. </div> <!-- container_login -->
11.
12.layout.css...
13.
14./* login */
15.#container_login{
16. font-family: Arial, sans-serif;
17. font-size: 12px;
18. margin: 0 auto;
19. overflow: hidden;
20. position: relative;
21. max-width: 100%;
22. height: 1306px;
23.}
24.a#login_logo{
25. position: absolute;
26. top: 0;
27. left: 404px;
28. height: 129px;
29. margin: 0 auto;
30. width: 192px;
31.}
32.#container_login #main_login{
33. float: none;
34. margin: 200px auto 0;
35. position: relative;
36. text-align: left;
37. width: 343px;
38.}
39.#container_login h3{
40. font-size: 1.3em;
41. font-weight: bold;
42. margin: 5px 15px;
43. text-transform: uppercase;

I know there's one thing that i didn't do. Can you help me please?

Thanks in advance,
Scotty13

I have used an image file "picture.PNG" like this :

<h1><img src="picture.PNG" /></h1>

then the css is

h1{
text-align: center;
margin: 20px;
padding: 10px;
height: 100px;
}

But it will not align the image in the center ?

Am i going about this the wrong way ? or is it just a syntax error ?

I have a problem with my background image. I need to centre the background image and center the container div on top of that. I have used the below CSS which has the desired effect in Mozilla but for some reason in ie, the background moves depending on browser size when it needs to stay put! Any ideas?

body {
font-size: 0.70em;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
background:#ffffff url('../images/content_bg.gif') top center no-repeat;
color: #303030;
height:100%;
min-height:100%;
}

#container {
width: 900px;
text-align:left;
position: absolute;
margin-left:-450px;
left:50%;
z-index: 100;
}

I am trying to get the background image for #feature-stripe to be fluid. I want it to expand and contract equally with the images just above and below it. The other images are in the #banner & #main-center. I can't seem to get the #feature-stripe to do the same.

Also, I am using the #main-left as a placeholder for position. I tried to eliminate it, but things to line back up like I think they should.

Side note: I am using XHTML 1.0 Strict DTD.

Any help or if someone could point me in the right direction I would appreciate it.

CSS Code:
Original - CSS Code body { margin: 0px 0px 0px 0px; padding: 0px; background: #431111; } #main-right { width: 20%; float: left; background: url('column_background2.png') repeat; overflow: hidden; padding-bottom: 5px; } #main-right p{ padding: 5px 10px 5px 10px; } #main-center { width: 60%; float: left; margin-left: auto; margin-right: auto; background: #000; padding-bottom: 0px; } #main-center #img { margin-left: 0%; } #main-left { width: 10%; float: left; /*background: #fff; */ padding-bottom: 10px; } #banner { background: #000 url('front-basket_1.png') no-repeat; height: 9.7em; width: 80%; margin-left: auto; margin-right: auto; color: gold; } #banner #right { float:right; width: 25%; height: 9.7em; background: url('column_background2.png') repeat; margin:0px 0px 10px 10px; } #banner #right p{ padding: 5px 10px 5px 10px; } #feature-stripe { background: #5B0E0E url('front-basket_2.png') no-repeat; background-position: 12.7% 0%; height: 20px; }

  

     body {


         margin:  0px 0px 0px 0px;


         padding:  0px;


         background:   #431111;


         }


     


     #main-right {


         width:  20%;


         float:  left;


         background:  url('column_background2.png') repeat;


         overflow: hidden;


         padding-bottom: 5px;


         }


      


      #main-right p{


         padding: 5px 10px 5px 10px;


         }


         


     #main-center {


         width:  60%;


         float:  left;


         margin-left:   auto;


         margin-right:   auto;


         background:  #000;


         padding-bottom:  0px;


         }


     


     #main-center #img {


         margin-left: 0%;    


         }


     


     #main-left {


         width:  10%;


         float:  left;


         /*background:  #fff; */


         padding-bottom:  10px;


         }


     


     #banner {


         background:  #000 url('front-basket_1.png') no-repeat;


         height:   9.7em;


         width:   80%;


         margin-left:   auto;


         margin-right:   auto;


         color: gold;


         }


  


     #banner #right {


         float:right;


         width: 25%;


         height: 9.7em; 


         background:  url('column_background2.png') repeat;


         margin:0px 0px 10px 10px;


     }


     


     #banner #right p{


         padding: 5px 10px 5px 10px;


         }


         


     #feature-stripe {


         background:  #5B0E0E url('front-basket_2.png') no-repeat;


         background-position: 12.7% 0%;


         height:   20px;


         } 

Code:
XHTML

<div id="banner"><div id="right"></div></div>
<div id="feature-stripe"></div>
<div id="main-left"></div>
<div id="main-center"><div id="img"><img src="front-basket_3.png" alt="" /></div></div>
<div id="main-right">This is the main right</div>

Edit: Currently I am getting this to work in Firefox. I will worry about the others later. Therefore, I may be back with more questions later.

BIO

BIO CSS

i would like for both the image and text to be centered on page-- they are just a little off....

am using FOX as primary browser -- but IE displays pretty much the same--

anyone got a fix for this??? its late and i have been over the coding

a million times but just dont see the solution it right now

thanks in advance!

Hi,

Here's the site I'm working with:
http://www.cjfusion.com

I want to get that image centered on the browser window and then depending on how big the viewers screen is, the browser will cover up the left and the right. I hope that makes sense. I almost want it to be fluid, but I'm unsure how to do that.

Ask questions if this doesnt make sense. Its hard to explain.

-CJ

I'm trying to position the image below vertically center and horizontally left to no avail. Its horizontally left but centers the top of the image in the center of the page. What am I doing wrong?

<DIV style="position: absolute; top: 50%; left: 0px; border: none"><img src="images/right.jpg"></img></DIV>

It seems I get one or the other, but not all.

I've tried margin: 0 auto; and that didn't work.

I am using the following code how do I change it so that it would show up in the center of the brower window?

Thanks
Tim
PHP Code:
<div style="position: absolute; left: 0px; z-index: 1; top: 0px; align: center\">
<object classid=\"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000\" 

codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0

,0\" width=\"544\" height=\"396\" id=\"cardio\" align=\"middle\">
<param name=\"allowScriptAccess\" value=\"sameDomain\" />
<param name=\"movie\" value=\"ads/cardio3.swf\" />
<param name=\"loop\" value=\"false\" />
<param name=\"quality\" value=\"high\" />
<param name=\"wmode\" value=\"transparent\" />
<param name=\"bgcolor\" value=\"#ffffff\" />
<embed src=\"ads/cardio3.swf\" loop=\"false\" quality=\"high\" wmode=\"transparent\" 

bgcolor=\"#ffffff\" width=\"544\" height=\"396\" name=\"cardio\" align=\"middle\" 

allowScriptAccess=\"sameDomain\" type=\"application/x-shockwave-flash\" 

pluginspage=\"http://www.macromedia.com/go/getflashplayer\" />
</object>
</div> 

I'm using a relative-positioned div as a container for an image, which is absolute-positioned. I'm doing this so that the image will automatically scale down to fit inside the containing div (nothing else I've tried has done this for me- so if there is another way to achieve this, please fill me in). This part works fine, but the image isn't as wide as the containing div, so I would like to center the image inside the div- but I can't seem to get it to work.
I tried the obvious text-align:center in the div. That actually worked... kinda. The image's left-side was in the center of the div, but obviously isn't the 'centering' that I'm looking for. I then tried setting margin-left and margin-right on the image to auto, and that did nothing.
I suspect that the fact that I have my image absolute-positioned is the culprit here, but I don't know how to get around it- or IF I can get around it without drastically changing my approach.

Admittedly, the container div resides inside a table cell. I know that isn't the best practice, but I spent so much time trying a div-only approach only to waste time and become frustrated that I went back to what I know works- at least for now. I tried removing the container div from the table and inserting the image directly to the table cell- but encountered more issues with the sizing of the image.

Essentially, my code is something like this:

CSS:
Code:

td#CONTENTDISPLAY
{
  width: 100%;
  height: 100%;
  text-align: left;
  vertical-align: top;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
}

div#CONTENTBANNER
{
  position: relative;
  height: 100%;
  padding: 0 0 0 0;
}

img.CONTENTIMG
{
  position: absolute;
  height: 100%;
}

HTML:
Code:

...
  <td id="CONTENTDISPLAY">
    <div id="CONTENTBANNER">
      <img class="CONTENTIMG" />
    </div>
  </td>
...

Nothing flashy, I know. One thing I should mention, however, is that the image is ALWAYS placed inside the container div using a Javascript function (it's a dynamic image). I doubt that makes a difference, but I figure it's worth mentioning.

Can anyone help point me in the right direction?

Thanks!

- skubik

Hi,

I have a front page which is one image only, no text. The image is centered horizontally (i.e. a simply text-align: center; ). My question is - how do I centre it vertically? (no matter what the resolution of the website visitor is).

i.e. Currently the image is at the top of my screen. I would like it to be in the centre, both horizontally and vertically.

Many thanks!

I need to center an img that I have fade in how do i change the below code so that it centers in the page


STYLE=\"POSITION: absolute; HEIGHT:75%;WIDTH:75%;TOP:5;LEFT:0;VISIBILITY:VISIBLE;

ZINDEX:1\"

thanks

tim