WordPress.org

1. kooi2000
   Member
   Posted 3 years ago #

   Hello,

   I was wondering (and after searching for it for an hour) how to center the images on this site: http://www.eeuwigweekend.nl

   As you can see the top left of the images are displayed. I don't want that, I want to display the center!! More logical, i think.

   I'm guessing this is the piece of code in the stylesheet that does the trick, but I can't solve the puzzle:

   .home .featured img{max-width:500px;}

   To give you an idea of the whole home page in code:

   /* =home beginpagina */
   .bigdate{color:#e3e5e7;font-size:2.4em;font-weight:bolder;left:-0.2em;position:absolute;text-transform:uppercase;top:-0.5em;}
   .home #footer{width:924px;}
   .home .post{background:#3b4e5d;display:inline;float:left;height:300px;margin:2px;overflow:hidden;position:relative;width:226px;}
   .home .post-content{-moz-opacity:0.10;background:#FFFFFF;bottom:0;filter:alpha(opacity=95);font-size:1.2em;font-weight:bolder;left:0;opacity:0.95;padding:1em;position:absolute;width:202px;}
   .home .post-content-excerpt{display:block;font-size:0.8em;font-weight:normal;}
   .home .post-content:hover{background-color:#5e7aa7;}
   .home a:hover{text-decoration:none;color:#FFFFFF}
   a:hover img{-moz-opacity:0.8px;filter:none(opacity=80);opacity:0.8px;}
   .home .featured{background:#999;height:300px;margin:2px;overflow:hidden;width:456px;}
   .home .featured .bigdate{color:#e3e5e7;font-size:4.8em;font-weight:bolder;left:-0.2em;position:absolute;text-transform:uppercase;top:-0.5em;}
   .home .featured .post-content{width:434px;}
   .home .featured img{max-width:500px;}

   Help would be very appreciated!!

2. kooi2000
   Member
   Posted 3 years ago #

   Really noone?

3. mrkingid
   Member
   Posted 3 years ago #

   looks centered to me

4. Eric Amundson
   Member
   Posted 3 years ago #

   Hey kooi2000,

   Personally, I'd have initially thought to do this using background images instead, which would allow the ability to position.

   Here's what may be a simpler solution:

   #content div.recent div img {position:absolute; left:-50%;top:-50%;}
   #content div.featured img {position:relative; left:0;top:-50%;}

   Here's an example of how you could do it with background images. You have:

   <div id="post-263" class="hentry p6 post publish author-peter category-fictie tag-chagrijn tag-dood tag-harry tag-volkskrant y2008 m06 d29 h01 alt">
   
     <div align="center">
       <a href="http://www.eeuwigweekend.nl/2008/06/29/nooit-meer-klagen/" title="Nooit meer klagen"><img src="http://www.eeuwigweekend.nl/wp-content/2008/06/img_5335-800.jpg" alt=""></a>
     </div>
     <div class="bigdate">29 Jun</div>
   <a href="http://www.eeuwigweekend.nl/2008/06/29/nooit-meer-klagen/" rel="bookmark" title="Nooit meer klagen" class="post-content">Nooit meer klagen<span class="post-content-excerpt">Schuldbewust requiem voor een chagrijn.
   
   </span>
   <h3 class="page-title author">Door: <span class="vcard">Peter</span></h3></a>
   </div><!-- .post -->

   I'm not exactly sure how you're editing this page, but I might do something like this:

   <div id="post-263" class="hentry p6 post publish author-peter category-fictie tag-chagrijn tag-dood tag-harry tag-volkskrant y2008 m06 d29 h01 alt">
   
     <div align="center">
       <a href="http://www.eeuwigweekend.nl/2008/06/29/nooit-meer-klagen/" title="Nooit meer klagen">Nooit meer klagen</a>
     </div>
     <div class="bigdate">29 Jun</div>
   <a href="http://www.eeuwigweekend.nl/2008/06/29/nooit-meer-klagen/" rel="bookmark" title="Nooit meer klagen" class="post-content">Nooit meer klagen<span class="post-content-excerpt">Schuldbewust requiem voor een chagrijn.
   
   </span>
   <h3 class="page-title author">Door: <span class="vcard">Peter</span></h3></a>
   </div><!-- .post -->

   Then in your CSS file, you'd create an entry for each post ID that applies a background-image like so:

   #post-263 #center a {
   display:block;
   width: 200px;
   background: url(linktoimage.jpg) no-repeat 50% 50%}

   There are some downsides to this, specifically that it takes an edit to CSS for each new post.

   You'd also have to use text-align: -9999px; on the text for your links.

   So, try the first option. :)

5. kooi2000
   Member
   Posted 3 years ago #

   Thanks!
   I wanna go for the first option!
   But where do I put the

   #content div.recent div img {position:absolute; left:-50%;top:-50%;}
   #content div.featured img {position:relative; left:0;top:-50%;}

   code exactly in my css?

6. ccdamboise
   Member
   Posted 3 years ago #

   I am trying to edit an image I have posted from my library. It is way too big and in the middle of the page. I am new to WP and have no experience what so ever!

7. ccdamboise
   Member
   Posted 3 years ago #

   Is there no simple way to edit images without having to write code?

Topic Closed

This topic has been closed to new replies.