How to center these images?

  • kooi2000

    (@kooi2000)


    15 years, 10 months 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!!

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

    (@kooi2000)

    15 years, 10 months ago

    Really noone?

    mrkingid

    (@mrkingid)

    15 years, 10 months ago

    looks centered to me

    Eric Amundson

    (@sewmyheadon)

    15 years, 10 months 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. 🙂

    Thread Starter kooi2000

    (@kooi2000)

    15 years, 9 months 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?

    ccdamboise

    (@ccdamboise)

    15 years, 6 months 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!

    ccdamboise

    (@ccdamboise)

    15 years, 6 months ago

    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.