使用css将Pin-it按钮与一些文本在同一行对齐

Question

我真的很困惑，希望能得到一些css方面的帮助。

我有一个pin它按钮，我想显示，连同一些文本。我希望它们在同一条线上并排成一行，如果你愿意的话都是水平的&垂直，中间有一些空间(足够的空间，让他们看起来很漂亮)

提前谢谢你…艾莉森(http://www.veggiesbycandlelight.com)

https://jsfiddle.net/alisonrost/9mwg5pvh/1/

<div class="recipesharing">
<div>
<img class="pintherecipe" style="display:inline;" />
<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>

Answer 1

使用vertical-algin属性设置图片

Here Fixed fiddle

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

Answer 2

添加到img {vertical-align: middle;}和p {margin-left: 8px;}中，这将对您有所帮助。

Answer 3

添加vertical-align:middle到a和一些padding-right:10px;

div a{
      display: inline-block;
       vertical-align: middle;
       padding-right:10px
    }