If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3

Thread: Center Image?

  1. #1
    Junior Member
    Join Date
    Dec 2012
    Member #
    I'm using wordpress & a theme & i'm editing the right file (source) of it.


    I know I have to use the <center>IMAGE HERE</center> code, but i did it doesn't work. What's the right place to put this code at to center the images instead of showing it like that!!!

    Ok the source is too long to post here so i posted it on paste bin



  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Cottage Grove, Minnesota
    Member #
    726 times
    Your theme is somewhat different than most themes. Yours is a grid system that resizes
    the images when the browser window is resized. So, it's designed for desktop as well as
    iPad (small screen). That's a nice way to do things.

    So, how to center the images may not work the way I'm thinking it will.

    I would start with looking at this part of your script:

    <div class="slider-project">
    div class="flex-container">
    <div class="flexslider2">
    <ul class="slides"><li>
    <div class="caption">
    <a href="" rel="prettyPhoto[gallery1]"><img src="" >
    <span class="hover-effect big zoom"></span></a>
    </div><!-- hover effect -->
    </div><!-- End slider-project -->

    That is an example where it prints one of your images that you wish to center.

    Within one of your .css (CSS stylesheet) files, there will be definitions on how to
    style those <div> and class ID's. Normally you would be specifying the width of
    your WP columns (page layout), but your layout is based on percent, not pixels.
    That's why <center> doesn't work ... it doesn't know how much to center it if the
    width is not known.

    So, I'm going to say that you start at the outside and work your way in ...

    Perhaps find the definition for .slider-project and add: text-align:center;
    If that doesn't work, go to the next one ... .flex-container

    Further out, you'll find the slider class within this: <div class="sixteen columns top bottom-2">
    It's possible that you might have to go that far ... text-align:center;

    Which .css file you will find those in .. I'm not sure. There are several .css files to search.

    See if doing that works.

  4. #3
    Senior Member Ganners's Avatar
    Join Date
    Feb 2011
    United Kingdom
    Member #
    92 times
    To physically center those images, you need to target .caption > a and give it a display of block, and text-align of center. Add this to dark-style.css around line 126. You'll probably want to give it a class of center, so you'd probably want to target somewhere higher up which would have a class of 'center'.

    Do not use <center> tags! They are deprecated
    Mark Gannaway Software Developer

    Recent Experiments
    - Backpropogation Neural Network language solving (
    - Animated image to ASCII (
    - 3D Paper Characters (
    - Anagram solving (

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
All times are GMT -6. The time now is 08:19 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: