Images not Centering

  • Resolved stjamesfolsom

    (@stjamesfolsom)


    12 years, 12 months ago

    I’ve looked through past posts, but some of the fixes I’ve tried don’t seem to work.

    I cannot get images to center on any of my WP pages. Since I am designing this so other members of our site can edit and add content, I need something in the CSS fixed, as none of them are really proficient with computers.

    I tried the following, which seemed to work for others:

    .aligncenter, img.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; }

    I added this to my #content and #body sections of the CSS, but it’s still not working.

    If anyone has any ideas as how to troubleshoot this, I’d greatly appreciate it! This has been a problem since the beginning, and I have been trained in CSS, and still can’t figure it out.

    Here’s the code:

    [CSS code moderated – please post a link to your site]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Adrian

    (@adrianfraguela)

    Can you send a link to the problem please? I’ll take a look at that and get back to you

    Thread Starter stjamesfolsom

    (@stjamesfolsom)

    The example of one of the pages with a problem is , password is “photo”.

    Adrian

    (@adrianfraguela)

    I found the problem, you haven’t closed the tags properly in the body declaration and also the #content. Below is the code that should work fine.

    body {
margin: 0;
padding: 0;
background: #FFFFFF url(images/img01.gif) repeat-x;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #0C0C0C;}

.aligncenter, img.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; }

form {
margin: 0;
padding: 0;
}

input, textarea {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
color: #000000;
}

h1, h2, h3 {
font-family: Arial, Helvetica, sans-serif;
}

h1 {
font-size: 3em;
}

h2 {
font-size: 2em;
}

h3 {
font-size: 1em;
}

p, ul, ol {
margin-bottom: 1.8em;
line-height: 160%;
}

ul, ol {
}

blockquote {
}

a {
color: #414141;
}

a:hover {
text-decoration: none;
}

hr {
display: none;
}

/* Menu */

#menu {
width: 960px;
height: 45px;
margin: 0 auto;
padding: 0px 0;
background: url(images/img02.jpg) no-repeat center top;
}

#menu ul {
height: 45px;
margin: 0;
padding: 0;
background: url(images/img03.gif) no-repeat;
list-style: none;
}

#menu li {
float: left;
height: 45px;
background: url(images/img03.gif) no-repeat right top;
}

#menu a {
float: left;
height: 20px;
margin: 0px;
padding: 10px 15px;
text-decoration: none;
text-transform: uppercase;
font-size: smaller;
font-weight: bold;
color: #000000;
}

#menu a:hover {
background: url(images/img02.gif) repeat-x;
color: #FFFFFF;
height: 45px;
}

#menu .current_page_item a {
height: 45px;
color: #FFFFFF;
}

/* Splash */

#splash {
background:url(images/img05.jpg);
width: 970px;
height: 200px;
margin: 0 auto;
}

/* Logo */

#logo {
width: 960px;
height: 91px;
margin: 0 auto;

color: #414141;
}

#logo h1, #logo h2 {
margin: 0;
padding: 0 20px;
}

#logo h1 {
float: left;
padding-top: 30px;
letter-spacing: -3px;
text-transform: uppercase;
font-size: 3em;
}

#logo h2 {
float: right;
padding-top: 49px;
letter-spacing: -1px;
text-transform: uppercase;
font-weight: bold;
font-size: 16px;
}

#logo a {
text-decoration: none;
color: #414141;
}

/* Page */

#page {
width: 960px;
margin: 0 auto;
padding: 30px;
}

/* Content */

#content {
float: right;
width: 680px;
}

.aligncenter, img.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; }

.post {
padding-bottom: 20px;
}

.post .title {
margin: 0;
padding: 5px 20px;
letter-spacing: -2px;
border-bottom: 1px dashed #B9B9B9;
text-transform: uppercase;
font-size: 24px;
}

.post .title a {
text-decoration: none;
}

.post .entry {
padding: 10px 20px;
}

.post .meta {
height: 26px;
background: #F5F5F5;
border-top: 1px solid #E9E9E9;
text-decoration: none;
text-transform: uppercase;
font-size: smaller;
}

.post .posted {
float: left;
height: 16px;
padding: 5px 20px;
}

.post .permalink, .post .comments {
float: right;
height: 16px;
padding: 5px 20px;
}

.post .permalink {
}

/* Sidebar */

#sidebar {
float: left;
width: 250px;
}

#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}

#sidebar li {
margin-bottom: 20px;
}

#sidebar li ul {
padding: 20px;
}

#sidebar li li {
margin: 0;
padding-left: 10px;
padding-bottom: 5px;
background: url(images/img04.gif) no-repeat left 50%;
}

#sidebar p {
padding: 0 20px;
}

#sidebar h2 {
height: 20px;
margin: 0;
padding: 6px 0 0 20px;
background: url(images/img07.jpg) no-repeat;
border-bottom: 1px dashed #B9B9B9;
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
color: #000000;
}

/* Search */

#search form {
padding: 20px;
}

#search br {
display: none;
}

#search #s {
width: 135px;
}

/* Footer */

#footer {
clear: both;
width: 960px;
height: 50px;
margin: 0 auto;
padding: 20px 0;
border-top: 6px solid #3F3F3F;
font-size: smaller;
}

#footer p {
margin: 0;
text-align: center;
line-height: normal;
}
    Thread Starter stjamesfolsom

    (@stjamesfolsom)

    Thank you so much…I should have validated my CSS, or looked more closely at it in one of my code editors…closed tags would certainly be an issue.

    I really apreciate your help!!

    Adrian

    (@adrianfraguela)

    No problem, I sometimes get blinded by code too! Always helps to have someone look at it.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Images not Centering’ is closed to new replies.

Tags