How to center these images?

  • Hello,

    I was wondering (and after searching for it for an hour) how to center the images on this site: https://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!!

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter kooi2000

    (@kooi2000)

    Really noone?

    looks centered to me

    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="https://www.eeuwigweekend.nl/2008/06/29/nooit-meer-klagen/" title="Nooit meer klagen"><img src="https://www.eeuwigweekend.nl/wp-content/2008/06/img_5335-800.jpg" alt=""></a>
  </div>
  <div class="bigdate">29 Jun</div>
<a href="https://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="https://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="https://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. ??

    Thread Starter kooi2000

    (@kooi2000)

    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?

    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!

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

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘How to center these images?’ is closed to new replies.