Computer problems,Computer help
*AX SOFT>>>Programming & Design

Centering with CSS ("margin: auto" not working...)?

I'm trying to center 3 images that are lined up next to each other and placed inside of a <div> tag. Margin: auto is not changing anything and I don't want to resort to <center>, since it's depreciated. The code concerning these sections is below, CSS then HTML.

#titlebar
{
margin: auto;
width: 450px;
height: 100px;
background-color: #000;
border: 4px outset #777;
}

.sword
{
position: relative;
bottom: 20;
height: 45px;
width: 43px;
}

#banner
{
margin: auto;
width: 350;
height: 90;
}

<div id="titlebar">
<img src="images/swords.jpg" class="sword" />
<a href="pvphome.html"><img src="images/banner.jpg" id="banner" alt="HOME"/></a>
<img src="images/swords.jpg" class="sword" /></div>

The actual "titlebar" item is centering correctly, but the images inside the titlebar aren't.

Wish I had your images to double check this with, but it centers in Firefox and IE for me:

<style type="text/css">
#titlebar
{
width: 450px;
margin: 0 auto;
height: 100px;
background-color: #000;
border: 4px outset #777;
}
</style>
</head>
<body>
<div id="wrap">
<div id="titlebar"><img src="images/swords.jpg" style="height: 45px; width: 43px;" alt="" /><a href="pvphome.html"><img src="images/banner.jpg" style="width: 350px; height: 90px;" alt="HOME"/></a><img src="images/swords.jpg" style="height: 45px; width: 43px;" alt="" /></div>
</div>

Some browsers, maybe older versions of IE that don't understand auto in the margin, you may want to add as shown:

#titlebar
{
width: 450px;
margin: 0 auto;
text-align: center;
height: 100px;
background-color: #000;
border: 4px outset #777;
}

This one is even better as you can adjust the position of images from top. Set borders to zero (0) if you don't want borders. I used them since I didn't have actual images.

Ron

Always try to give the best answer I can instead of getting points. That code did work, so I don't understand why it didn't fix the problem. Could be something to do with the container the table is in.

Ron Report It

<body style="margin:auto; width=800px">
<div id="...">

<img src="images/swords.jpg" class="sword" />
....
...
...
...

</div>
</body>

Tags
　　General - Computers & Internet 　　Software 　　Security 　　Programming & Design 　　Facebook 　　Flickr 　　Google 　　MSN 　　MySpace
Related information
  • Photoshop!!?

    try this: tutorialized.com there are a lot of photoshop techniques here

    ...
  • Voip and Sip with java?

    This is very hard if you do not know programming very well. However, to help you on your way, you will need to look at the java media framework (JMF): ...

  • Is there a free web page,Were I can learn to do graphics?

    To use Adobe Photoshop here a website with tutorials ...

  • Help with PHP web form submit message?

    Try: $numoferrors = count($errors); if ($numoferrors > 0) { echo $errors[0]; exit; } Then you are just printing out the first error in the array.So once they correct that and...

  • How to display a category menu in Drupal's front page?

    Two steps... 1) Set up your categories (make sure the Taxonomy module is enabled). 2) Set up menus that point to your category URLs. You might also consider the Taxonomy Menu add-in module...

  • How can i make personal virus...?

    First off, most viruses take some expertise to write. There is no "trivial way" to write a virus, so there are hardly any (public) tutorials available. Also note that using computer vi...

  • International Problem...?

    Not a question?

    ...
  • How many Steps to make website search engine ready?

    There are loads of things that you can do to make your site ready. SEO tutorials can be found here: ...

    • 　

    Categories--Copyright/IP Policy--Contact Webmaster