CSS - Centering An Image Inside A <div> Using Css

Damn another problem good thing you guys are so helpful....

What am I doing wrong here?

css
Code:

#footer{
	position:relative;
	z-index:-1;
	margin-top:-50px;
	background-color:#666666;
	width:100%;
	height:100px;
	margin-left:auto;
	margin-right:auto;
	border-top:#000000 10px solid;
}
#footer ul{
	position:absolute;
	padding:0px;
	margin-top:50px;
	margin-left:auto;
	margin-right:auto; 
}
#footer li{
	display:inline;
	padding:0px;
	margin:0px;
}
#footer a{
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	
	border-right:#FFFFFF 1px solid;
}

html
Code:

<div id="footer">
	<ul>
    	<li><a href="#">Nav 1</a></li>
        <li><a href="#">Nav 2</a></li>
        <li><a href="#">Nav 3</a></li>
        <li><a href="#">Nav 4</a></li>
        <li><a href="#">Nav 5</a></li>
        <li><a href="#">Nav 6</a></li>
        <li><a href="#">Nav 7</a></li>
    </ul>

</div>

Just can't seem to get the list centered inside the div

Centering DIVs inside other DIVs in Firefox? Can it be done in a straight forward way? Setting the inner DIVs float to none seemed to work for IE but not FF.

So I have 2 different background patterns that extend to infinity behind my logo.
Problem is, I could not center my logo in front of these two patters.
Code:

so it should display it like;

Layer 1: Left Pattern Right Pattern
Layer 2:              Logo

But instead, its displayed as;

Layer 1: Left Pattern Right Pattern
Layer 2: Logo

I spent over an hour searching this on the internet.
Any help appreciated, thanks!
Code:

.subcontent {
	min-height:50px;
	width:100%;
	background:#00CC66;
}
.leftcontent {
	min-height:50px;
	width:50%;
	float:left;
	background:url(images/bg_lpattern.jpg) repeat-x;
}
.rightcontent {
	min-height:50px;
	width:50%;
	float:left;
	background:url(images/bg_rpattern.jpg) repeat-x;
}

  <div class="subcontent" style="position:relative;">
  	<div style="margin-left:auto; margin-right:auto; width:400px; height:50px; position:absolute;">
  		<img src="images/logo.jpg" alt="Insert Logo Here" name="Insert_logo" width="200px" height="50px" />
    </div>
    <div class="leftcontent">
    </div>
    <div class="rightcontent">
    </div>
  </div>

I have a div with background images. It is styled float:left. That is all fine. The div is sized at 50x50px. Inside this div is a smaller image. I want the image to appear centered of the div. I have tried everything I can think of w r t margins and padding but the image allways shows up in the upper left corner.

Here is an example:
Code:

<div   class='caltool'   onmouseover="this.style.backgroundImage = 'url(images/litegearani.gif)';" onmouseout="this.style.backgroundImage = 'url(images/litegearstill.gif)';">
<a  href="whatever.html" title="export to desktop calendar"><img style="margin: auto; height:16px; width:16px;" src="icon_export_vcal.png"  width="16" height="16" border="0" /></a>
</div>

Here are the styles in the caltool class:
Code:

.caltool {
    float: left; 
    background-image: url(../images/litegearstill.gif);   
    background-repeat:  no-repeat; 
    background-position:center; 
    height:50px; 
    width: 50px; 
}    

How can I make the images be CENTERED over the gear background??

hello,

i have this in my html:

Code:

<div id="link_image">
<a href="http://www.mylink.com/" target="_blank">My link with image
</div>

& here the css:

Code:

#link_image a
{
display:block;
width: 130px;
height: 21px;
text-indent:-3000px;
overflow:hidden;
text-decoration:none;
background:url(images/image.jpg) 0 0 no-repeat;
padding: 7px;
background-color: #667700;
}

Now I would like that the image is right in the center of the background border with color #667700. Like now, it's just on the left side, not centered.

thanks!

I've been away for nearly three months and may have forgotten some of the basics of CSS.
Today I added a banner photo to the top of my new bike club site, but cannot remember how to style it so that, when a visitor adjusts the width of their browser window, the banner photo sidles to the left or right to remain centered at the top of their window, along with the the bike club name and pull-down menus immediately below (see http://stallinswebdesign.com/vs/index.php). Can you suggest how I can style that banner photo so that it remains centered whenever a visitor stretches their browser window?

I know you can view source to view my <div> structure and so forth; let me know if you'd like
to see any parts of my style sheet.

Thank you for your valuable time.
Curtis

There's probably a simple, obvious solution for this, but I'm having problems managing to get this to work. Here's the isse: I have a menu that basically looks like so:

Home | Guestbook | Contact Us | Help

I need to place an image beneath each menu item so that is centered directly below the text, to indicate which page the user is on (not my design; I don't want to hear about it).

I can not use tables for this - the menu items are pulled out of a database, and are generated in a loop; I also can't use some sort of div that requires a set width for each menu item, due to the fact that the menu items are all of variable widths.

Ideas?

Hi all,
I am having trouble getting an image to go where I want it to, which is flush up against the top of the page and horizontally centered. I originally accomplished this a few years ago on my website, but now I am trying to do a new build, and this time around the code I used last time is not working!

The working image can be seen here, it is the banner logo displayed at the top of the page. It's currently perfectly set, and all I want is to have that again on a new page. However, when I simply copy/paste the old code onto that new page, it doesn't look anything like the original.

Here is the original code. In retrospect I have no idea how I got it to work, since it looks messy as heck:
Code:

<table align="center" style="position:relative; top:-15; z-index:5"  border="0" width="983" height="198">
<tr><td><img style="position:absolute; top:0;" src="http://www.thesunderedguard.com/images/banner.jpg"></td></tr>
</table>

All my tinkering around with the new page has not been successful at all. Any help would be much appreciated!

Cheers

Hello,
I am a fan of css and use it all the time. My one and only one problem with it is centering an image in a column that has been floated right. I've tried numerous ways to do this, but none have worked. Usually I end up adding a 2 column table, fixing the right column with x px, then adding images in rows in the left table column. This really does not center the image for all screen sizes, but it does move the images to the left. Also, margin-right:xpx would do about the same thing.
This long-winded explanation leads to my css question: Is there a way to center images in a column that has been floated right? Maybe I am over-looking the obvious.
Regards,
Lee

Hi,

I'm new to CSS and haven't been able to get this working. I have two layers, one for an image, and another for text that goes on top. The text is supposed to be centered and the image should be centered wrt the text.

The problem is that sometimes a word in the text will be too long and there's overflow. When this happens, the image stays on the left and the text box gets larger. This way the image isn't right behind the center of the text.

I tried using overflow: visible but this didn't change anything.

Thanks for any help.

This is probably a dumb question, but I have a div, with a floated image inside. When the div doesn't have enough text inside to make it taller than the image, the image will stick out the bottom of the div. I've attached a couple of images to show what's happening. I want div to stretch around the image at all times, even if there's only one line of text next to it.

Code:

<html>
   <head>
      <style>

         body {
            width: 800px; /* change this value */
            margin: 20px auto;
         }

         #container {
            border: 1px solid #f00;
            padding: 10px;
         }

         .floatright {
            float: right;
            margin: 10px;
            background-color: #aaf;
         }

      </style>
   </head>

   <body>

      <div id="container">

         <h3>some latin text</h3>

         <p>
            <img class="floatright" src="some_image.jpg" width="100" height="150" alt="Image" />
            Lorem ipsum dolor sit amet, consectetuer adipiscing
            elit, sed diam nonummy nibh euismod tincidunt ut            
            laoreet dolore magna aliquam erat volutpat. Ut wisi
            enim ad minim veniam, quis nostrud exerci tation 
            ullamcorper suscipit lobortis nisl ut aliquip ex ea 
            commodo consequat. Duis autem vel eum iriure dolor in 
            hendrerit in vulputate velit esse molestie consequat, 
            vel illum dolore eu feugiat nulla facilisis at vero eros et 
            accumsan et iusto odio dignissim qui blandit praesent 
            luptatum zzril delenit augue duis dolore te feugait nulla 
            facilisi.
         </p>
      </div>

   </body>

</html>

Hi.

K, I have NO idea where to begin on this one. I need to display a series of thumbnails (to be selected dynamically from a database) inside 1 <td> tag. I need them to be organized 3 wide by 3 high, with their titles underneath.

What would I use for this? I"m assuming I just set up a new class for that, but I don't know what to do for it.

Any help is greatly appreciated.

I'm pretty new to using CSS so please be gentle

I'm trying to hack (develop is to lofty a word at this point) this tableless page and get the bg image to stick to the right/top corner of the "content" div. IE6 renders it pretty well but Firefox (my preferred browser) is horrendous. The image size is 400x392. Any thoughts or a good reference on this would be greaty appreciated.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="http://www.inknoise.com/experimental/layoutomatic.php" />
<style type="text/css">
#container {
width: 760px;
width: 780px;
width: 760px;
border: 1px solid gray;
margin: 10px;
margin-left: auto;
margin-right: auto;
padding: 10px;
}

#banner {
padding: 5px;
margin-bottom: 5px;
background-color: rgb(213, 219, 225);
}

#content {
padding: 5px;
margin-left: 215px;
background-color: gray;
background-attachment: fixed;
background-image: url(images/bg_run.jpg);
background-repeat: no-repeat;
height: 400px;
background-position: right top;
}

#sidebar-a {
float: left;
width: 200px;
\width: 210px;
w\idth: 200px;
margin: 0;
margin-right: 5px;
padding: 5px;
background-color: rgb(235, 235, 235);
}

#footer {
clear: both;
padding: 5px;
margin-top: 5px;

background-color: rgb(213, 219, 225);
}
</style>
</head>
<body>
<div id="container">
<div id="banner">Banner</div>

<div id="sidebar-a">Sidebar</div>

<div id="content">Content</div>

<div id="footer">Footer</div>
</div>
</body>
</html>