Richten Sie eine Pin-it-Taste zusammen mit etwas Text in der gleichen Zeile mit CSS

Question

Ich bin wirklich ratlos und hoffe auf ein bisschen CSS-Hilfe.

Ich habe eine PIN-Taste, die ich zusammen mit etwas Text anzeigen möchte. Ich möchte sie auf der gleichen Linie und aufgereiht, wenn Sie beide horizontal & vertikal, mit etwas Abstand zwischen (genug Platz, so dass sie schön aussehen)

Vielen Dank im Voraus .. Alison (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

Verwendung vertical-algin Eigenschaft für Bild

Hier Fixed fiddle

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

Answer 2

zu img {vertical-align: middle;} hinzufügen und auch p {margin-left: 8px;} und dies wird Ihnen helfen.

Answer 3

hinzufügen vertical-align:middle-a und auch einige padding-right:10px;

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