Caption alignment help

  • Resolved menzy

    (@menzy)


    12 years, 4 months 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:

    https://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!

Viewing 8 replies - 1 through 8 (of 8 total)

  • 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.

    Thread Starter menzy

    (@menzy)

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

    Thread Starter menzy

    (@menzy)

    or what needs to change to not use the “absolute” position?

    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.

    BTW, where did you get that theme?

    Thread Starter menzy

    (@menzy)

    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”

    This is what I meant:

    margin: -50px auto 60px;

    You’ll have to experiment some more with it.

    But FWIW, that theme looks problematic:
    https://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:
    https://www.chipbennett.net/2010/12/10/only-download-wordpress-themes-from-trusted-sources/

    Thread Starter menzy

    (@menzy)

    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.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Caption alignment help’ is closed to new replies.