• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1556
  • Last Modified:

Image won't center

Hi all!

For some reason, I cannot get the image of the chair backs, about half-way down the page to center.

I'd like it to show up just above the H2 that says "Our Experience".

Here's the CSS:

/* CSS layout */
BODY {
      font: .8em/140% verdana, arial, sans-serif;
      text-align: center;
      padding: 0px;
      background: #f8f8f8;
      color: #000;
      margin: 0px auto;
      border-top: 3px solid #cc0000;}
img {      border-style: none;
      border-color: inherit;
      border-width: 0px;
      float: left;
}
.clear {
      clear: both;}

h1 {
      font: normal 220% tahoma;
      color: #cc0000;}

h2 {
      font: normal 160% tahoma;
      color: #888888;}

#wrapper {
      width: 850px;
      background: #fff url('images/bgimage.jpg') no-repeat top right;
      text-align: center;
      border: 1px solid #888888;
      min-height: 800px;
      margin-top: 10px;
}

.content table {
      
}

#masthead {
      width: 100%;
      margin: 10px 0 0 20px;
      float: left;
}
#top_nav {
      font-size: 80%;
      height: 30px;
      text-align: left;
      text-transform: uppercase;
}
      #top_nav a{
      padding: 0 8px 0 0;
      color: #888;
}
      #top_nav a:hover{
      padding: 0 8px 0 0;
      color: #cc0000;
}

#page_content {
      width: 100%;
      height: 100%;
}
      .content {
            width: 90%;
            float: left;
            padding: 10px 0 0 20px;
            text-align: left;
}
#footer {
      height: 30px;
      text-align: center;
      padding: 0 10px 0 0;
      margin: 10px 0 0 0;
      
}
.m_banner_hide{
      display:none;
}
.m_banner_show{
      display:block;
}
.imageright {float: right; margin: 3px; padding: 5px;}
.imageleft {float: left; margin: 3px; padding: 5px;}
.imagecenter {text-align: center !important; margin: 3px; padding: 5px;}


Any ideas?

Thanks!
0
ClassyLinks
Asked:
ClassyLinks
1 Solution
 
TheKyleCommented:
Add this to your css...

.imagecenter img
{
    float: none;
}
0
 
R7AFCommented:
Please give the HTML!

Where is the image placed? If it's inside a div without width, it will never center. Without HTML we can't tell.
0
 
TheKyleCommented:
The url is in the tags on his original comment above.  Getting rid of the float on the image fixes the problem.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
fuzzboxerCommented:
The "float:left" in this generic image declaration is causing it to align to the left.

img {      border-style: none;
      border-color: inherit;
      border-width: 0px;
      float: left;
}

Remove the float and it will center.
0
 
TheKyleCommented:
My solution above takes care of the float.
0
 
ClassyLinksAuthor Commented:
Thank you!
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now