将按钮与文本对齐（垂直和水平）

Question

我很难过，希望得到一些帮助。

我想将Pin It Button与一些文本对齐，两者之间有足够的空间，所以看起来不错。 然后我想在按钮和文本周围有水平和垂直线条。

在之前的一个问题中，有人用小提琴中的代码帮助我..虽然当我将它转移到我的网站时 ，它无法正常工作

非常感谢Alison

码：

<div class="recipesharing">
<div>

<a href="https://www.pinterest.com/pin/create/button/" data-pin-do="buttonBookmark" data-pin-tall="true" data-pin-round="true" data-pin-save="false"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_round_red_32.png" /></a><p.id>Pin For Later</p.id>
</div>
</div>

CSS

div.recipesharing {
    border-bottom: 2px solid rgb(247, 247, 247);
   border-top: 2px solid rgb(247, 247, 247);
   width: 600px;
   height: 60px;
}

div.pintherecipe {
  display: inline-block;
}

p.id {
    display: inline;
    padding-right: 100px;
    line-height:150px;
}

img {vertical-align: middle;margin-right:5px;}

Answer 1

这与jQuery无关。

无论如何，JSFiddle上的代码与站点上的代码不同。

的jsfiddle：

<div class="recipesharing">
  <div>
  <a href="https://www.pinterest.com/pin/create/button/" data-pin-do="buttonBookmark" data-pin-tall="true" data-pin-round="true" data-pin-save="false">
    <img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_round_red_32.png" />
  </a>
  <p.id>Pin For Later</p.id>
  </div>
</div>

网站：

<div class="recipesharing">
  <div>
    <p>
      <span class="PIN_1467591127309_button_pin PIN_1467591127309_round PIN_1467591127309_tall" data-pin-log="button_pinit_bookmarklet" data-pin-href="https://www.pinterest.com/pin/create/button/"></span>
      Pin For Later
    </p>
  </div>
</div>

但这并不是全部。 这是无效的：

<p.id>Pin For Later</p.id>

我确定你的意思是（根据你的CSS代码判断）：

<p class="id">Pin For Later</p>

另外，我删除了“line-height：150px”，因为它与设计混淆了。

这就是我将网站上的代码更改为JSFiddle（修正后的代码）的代码： [screenshot link] 。 它和JSFiddle的例子之间的唯一区别似乎是字体，这很容易修复（如果你甚至想在网站上使用无衬线字体）。