Hey Guys,

I'm sure I must be overlooking something super simple here.

Here's the deal, I'm using the Pinterest Button For Images plugin which floats a little pin me button over each image.

But I have set up my CSS to automatically center my images unless I specify it not to. I did this with a CSS insert like so:

padding: 5px;
border: none;
display: block; 
margin-left: auto;
margin-right: auto;

This plugin doesn't seem to be recognizing that at all though so it is floating the image over where it thinks the image should be (left aligned) because it doesn't have a center align command in each image link.

I'm thinking perhaps I need to add another section of CSS to this code in the plugin but I'm a little stumped on where to start.

This is the bit of CSS in the Pinterest plugin that I am working with:

.pibfi_pinterest {
	position: relative;
	display: block;
}

.pibfi_pinterest .xc_pin {
	width: 64px; height: 64px; /* Please note that the button is 80px x 50px. If you use a different size button, change this */
	background-image: url('ppibfi_button.png'); background-repeat: none; /* This is the buttons image. Image can be found in the plugin folder */
	position: absolute;
	display: block;
	top: 5px;
	margin-left: -1px;
	opacity: 0;
	cursor: pointer;
	display: none;
}
.pibfi_pinterest img.left + .xc_pin {
	margin-left: 0;
}

Many thanks for any tips!

what is the URL pointing to the issue?

Www.theadventurebite.om/food

The element

<span class="xc_pin" onclick="pin_this(event, 'http://pinterest.com/pin/create/button/?url=http://theadventurebite.com/best-quiche-recipe/&media=http://farm9.staticflickr.com/8377/8529567416_bbb832731f_z.jpg&description=Best Quiche Recipe')" style="display: block; left: 586px;"> </span>

has some in-line CSS which takes precidence. If you want to change the 'left', you'll need to add '!important' to it.

I see that, I'm not entirely sure what to do with it though.

This is the code within the PHP that is calling that:

<span class="pibfi_pinterest">
		<img%1$ssrc="%2$s.%3$s"%4$s>
			<span class="xc_pin" onclick="pin_this(event, \''.
			$pinterest_base_url.
			'?url='.esc_url($post_url).
			'&media=%2$s.%3$s'.'&description='.$post_title.'\')">
			</span>
		</span>';

I'm not entirely sure where it is picking up that style code as well as the width of what it thinks the images are....the 586px is not the width of the images they are 640x480.

Are you trying to float the pintrest button so it is centered on the image?
when I look at teh site, the image is centered and the pintrest button is at the top right
have you asked the plugin author about the inline CSS?
and exactly which pintrest plugin are you using? (url)