CSS - Center An Image Using Css

I've checked the class, and it's peachy, I've added a style= "margin: 0 auto;" tag, a style="text-align: center;" tag.

I've tried everything I can think of.

The image isn't receiving any parent styling that is holding it back from centering that I am aware of.

Will somebody please learn me!

URL is :
www . dalcon .com / business / skype-for-asterisk/

the image I'm referring to is the skype for asterisk image.

Sorry about broken link, I don't have the rep around here to not be considered a spammer yet I guess (it won't let me post a link)

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!

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.

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>

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

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

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'm not quite sure how to do this:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>Untitled Document</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <style type="text/css">
    #content {
      float: left;
      width: 437px;
      margin: 10px;
      margin-top: 0;
    } /* end #content */
    #content ul {
      list-style-type: none;
      margin-top: auto;
      padding-bottom: 1em;
      background-color: #00ff00;
    } /* end #content ul */
    #content ul li { 
      float: left; 
    } /* end #content ul li */
    #content ul li a { 
      position: relative; 
      left: 1px; 
      top: 1px;
      text-decoration: none;
      color: #ff0000; 
    } /* end #content ul li a */
    #content p { clear: both; }
    .shadow { 
      color: blue;
      position: absolute; 
      left: -1px; 
      top: -1px;
    } /* end .shadow */
  </style>
</head>
<body>
  <div id="content">
    <ul>
      <li><a href="#">Link 1<span class="shadow">Link 1</span></a></li>
      <li><a href="#">Link 2<span class="shadow">Link 2</span></a></li>
      <li><a href="#">Link 3<span class="shadow">Link 3</span></a></li>
      <li><a href="#">Link 4<span class="shadow">Link 4</span></a></li>
    </ul>
  </div>
</body>
</html>

I need the text to be centered in the green box. Not sure the best way to do that.

Hello,

I have a container div and i want to put some fixed-width left-floated divs inside it. The problem is i want to make them appear in the center of the container, instead of left. The problem is i don't know how many of them there's going to be, therefore i can't just put them inside of another fixed-width container and set it's margin to auto. I could probably do it with tables easily, but how would i do it in css?

I am having a small problem with centering a main container div..

The main div is 700 pixels wide .. I have numerous divs inside this container div. Everything is peachy, but I cant seem for the life of me to get the container div centered in the browser window...

I tried <div align="center">

even tried text-align:center;

any thoughts?