How can I align this WordPress image caption with the top of the image?

3 Views

I’m writing a WordPress theme. I’d like the captions I add to my images in the theme to be pulled to the left of an image and aligned with the top of the image, like the picture below:

enter image description here

Read More

The HTML output by WordPress looks like this (simplified for clarity): 

<div id="attachment_1726" style="width: 1034px" class="wp-caption aligncenter">
   <a href="some_url"><img class="wp-image-1726 size-large" src="the_src" width="1024" height="640"></a>
   <p class="wp-caption-text">Satoshi town, the trading capital of BitQuest</p>
</div>

I can’t figure out how to pull the wp-caption-text paragraph out. I;ve tried the following: 

.wp-caption-text {
  position: relative;
  left: -170px;
  top: 0;
  width: 150px;
}

But this doesn’t work. Here’s the result:

enter image description here

Can anyone point me in the correct direction?

Post Views: 3

Related posts

2 comments

  1. You have to float both elements. Also may apply vertical-align: top;

    .wrapper {
  width: 450px;
}
p,
img {
  float: left;
}
p {
  margin: 0;
  width: 100px;
}
    <div class="wrapper">

  <p>Satoshi town, the trading capital of BitQuest</p>
  <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" />
</div>

  2. Try to display it as inline-block:

    .wp-caption-text {
  position: absolute;
  display: inline-block;
  left: -170px;
  top: 0;
  width: 150px;
}

Comments are closed.