如何将该Wordpress图片标题与图片顶部对齐？

Question

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:

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:

Can anyone point me in the correct direction?

Answer 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> 

Answer 2

Try to display it as inline-block:

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