WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Caption alignment help (9 posts)

  1. menzy
    Member
    Posted 1 year ago #

    Hi Guys

    Im trying to get my captions to appear in the center of my images. I currently have them appearing over the image at the bottom but for the life of me I cannot get them to center as well.

    Here is a post with an image with the captions on the left:

    http://www.almenzel.com/?p=856

    and here is the CSS I added to my CSS section to get it to work:

    .wp-caption {
    	border: none;
    	text-align: center;
    	background: none;
    	padding: 5px;
    	margin: 10px;
    	position: relative;
    }
    
    .wp-caption img {
    	margin: 0;
    	padding: 0;
    	border: 0 none;
    }
    
    .wp-caption p.wp-caption-text {
    	background: url("images/bg-blacktrans50.png") repeat scroll 0 0 transparent;
    	color: #FFFFFF;
    	font-size: 11px;
    	font-style: italic;
    	margin: 10px;
    	padding: 5px;
    	position: absolute;
    	bottom: 1em;
    	left: 0;
    	-moz-border-radius: 8px;
    	-khtml-border-radius: 8px;
    	-webkit-border-radius: 8px;
    	border-radius: 8px;
    }

    Any help will be much appreciated!

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Because you are using absolute position on them, you'll need to set the location using the "left" attribute. Try

    left: 150px;

    in the last section of CSS above.

  3. menzy
    Member
    Posted 1 year ago #

    is there a way to center instead of left:150px; because i have all different sized images?

  4. menzy
    Member
    Posted 1 year ago #

    or what needs to change to not use the "absolute" position?

  5. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    No, not with absolute positioning. Though you could try using percentage instead of px for the left -- not sure if that will work but test it out. Or you could get rid of absolute position and use negative top margins and auto side margins (to center) instead to move the caption on top of the image.

  6. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    BTW, where did you get that theme?

  7. menzy
    Member
    Posted 1 year ago #

    I have tried the following but it leaves a big space under the photo's where the caption would normally be...

    position: relative;
    	left: auto;
    	right: auto;
    	top: -20px;

    the Theme is "Hong Kong Night Theme"

  8. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    This is what I meant:

    margin: -50px auto 60px;

    You'll have to experiment some more with it.

    But FWIW, that theme looks problematic:
    http://www.themegrade.com/hong-kong-night-theme/

    And this site is even worse -- it's in violation of the WP trademark policy.

    In any case, the theme does not appear to be in keeping with the WP GPL license and open source policy/philosophy - which is a problem in terms of being supported here.

    This article may be helpful:
    http://www.chipbennett.net/2010/12/10/only-download-wordpress-themes-from-trusted-sources/

  9. menzy
    Member
    Posted 1 year ago #

    Hi

    Thanks for your help! I got it to look roughly how I want it to.

    I have found issues with this theme and have fixed most of the issues with help from these support pages.

    Thanks for the links to the articles. I will have a good read.

Topic Closed

This topic has been closed to new replies.

About this Topic