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

Posted 2023-03-06

【中文标题】如何将此 Wordpress 图片标题与图片顶部对齐？

【英文标题】：How can I align this Wordpress image caption with the top of the image?

【发布时间】：2015-10-05 22:21:03

【问题描述】：

我正在编写一个 Wordpress 主题。我希望将我添加到主题中图像的标题拉到图像的左侧并与图像的顶部对齐，如下图所示：

Wordpress 的 html 输出如下所示（为清晰起见进行了简化）：

<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"  ></a>
   <p class="wp-caption-text">Satoshi town, the trading capital of BitQuest</p>
</div>

我不知道如何提取wp-caption-text 段落。我尝试了以下方法：

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

但这不起作用。结果如下：

谁能指出我正确的方向？

【参考方案1】：

你必须浮动两个元素。也可申请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】：

尝试将其显示为内联块：

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