ピンのボタンをテキストに合わせる（縦横両方向）

Question

私は困惑しており、少し助けが必要です。

私は2つのそれは素敵に見えるとの間に十分なスペースで、いくつかのテキストにピン留めボタンを合わせたいと思います。次に、ボタンとテキストを囲む水平線と垂直線が必要です。

：私は my websiteにそれを転送するとき、それは事前にそんなに

おかげで、 アリソン

コードを働いていないが、誰かが.. fiddleのコードで私を助けて、前の質問で

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

また、私は、「行の高さ：150ピクセル、」削除それはめちゃくちゃので、デザインと一緒に。

これは、サイトのコードをJSFiddle（訂正されたコード）のコードに変更した後の見方です。[screenshot link]。 JSFiddleの例との唯一の違いはフォントであると思われますが、修正するのは簡単です（ウェブサイトでサンセリフのフォントが必要な場合でも）。