将 PayPal 按钮变成图片说明答案

【问题标题】：Turning PayPal Button Into an Image Caption将 PayPal 按钮变成图片说明
【发布时间】：2015-03-30 07:39:13
【问题描述】：

我的页面目前是这样的：http://i.imgur.com/RRriMuu.jpg

我尝试将包含“Wesson”、下拉菜单和“立即购买”的按钮变成图片说明，这样它就可以直接位于金毛猎犬 (Wesson) 的图画下方。它不仅不在图像下方居中，而且还将其他图像推到了右侧。理想情况下，我实际上希望按钮位于图像的正上方，为此我在页面上创建了额外的空间。这是我的代码：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
<!--

#banner {width:100%}
#banner img {width:100%;height:auto}

nav {width:100%;display:block;}
nav ul {list-style-type:none;margin:0;padding:0;text-align:center;
background-color:#222419}
li {display:inline-block;background-color:#222419;}
nav a {line-height:35px; color:white; padding: 0 30px; font-size:18px;
font-family:Arial, sans-serif;background-color:#222419;}
nav a:hover {text-decoration:none}

a{float:left;
 margin-right:58px;
 margin-left:58px;
 color:#000;
 text-decoration:none;
}

body  {background-image:url("background1.jpg");
   background-size:1710px 1405px;
   background-repeat:no-repeat;

}

.white_bg  {background-color:#ffffff;
        padding: 3px;
}

.print   {-webkit-transform:rotate(-15deg);
      transform:rotate(-15deg);
}

.print2   {-webkit-transform:rotate(15deg);
       transform:rotate(15deg);
}

#wesson   {text-align:center;width:250px;}
#stanley  (text-align:center;width:250px;}

-->
</style>
<meta charset="utf-8"/>
<title>DrawYourPets.com</title>
</head>

<body>

<header>
<nav> 
<div style="text-align:center" id="banner">
<img src="drawyourpetsbanner3.jpg" border="0" 
alt="DrawYourPetsBanner3"  title="DrawYourPetsBanner2">
</div>

<div>
<ul>
<li><a href="index.html"><strong>HOME</strong></a></li>
<li><a href="contact.html"><strong>CONTACT</strong></a></li>
<li><a href="gallery.html"><strong>GALLERY<strong></a></li>
<li><a href="store.html"><strong>STORE</strong></a></li>
</ul>
</div>

</nav>
</header>

<section>
<aside>
</aside>

<article>


<p style="text-align:center;font-family:arial">
<font size="4"><strong>Prints, coffee mugs, magnets, 
and postcards are available for every drawing!
</strong>
</font>
</p>

<img class="print" style="float:left;margin-left:210px;
margin-right:25px;margin-top:50px"
 src="wesson_print.jpg" height="180px" weight="160px">
<img class="print2" style="float:left;margin-right:70px" 
src="mug.png" height="290px" weight="290px">
<img class="print" style="float:left;margin-right:125px;margin-top:55px" 
src="magnet.jpg" height="160px" weight="160px">
<img class="print2" style="float:left;margin-right:20px;
margin-top:85px" src="postcard5.jpg" height="120px" weight="120px">
<p style="clear:both;">

<br>
<br>
<br>
<br>
<br>

</p>

<figure>
<img src="wesson.jpg" height="300" weight="260" style="float:left;
margin-left:250px;margin-right:55px">
<figcaption>
<form action="https://www.paypal.com/cgi-bin/webscr" 
method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="J4TLYQ4FUR6BC">

<table style="text-align:center">
<tr><td><input type="hidden" name="on0" value="Wesson">
<p style="text-align:center;font-family:arial">
<font size="4"><strong>Wesson</strong>
</font>
</p>
</td>
</tr>
<tr>
<td>
<select name="os0">
<option value="Unframed Print">Unframed Print $50.00 USD</option>
<option value="Coffee Mug">Coffee Mug $10.00 USD</option>
<option value="Refrigerator Magnet">Refrigerator Magnet 
$4.00 USD</option>
<option value="Postcard">Postcard $1.00 USD</option>
</select> 
</td>
</tr>
</table>
<br>
<div style="float:left;margin-left:50px;">
<input type="hidden" name="currency_code" value="USD">
<input type="image" 
src="https://www.paypalobjects.com/en_US/i/btn/btn_buynow_LG.gif" 
border="0" name="submit" 
alt="PayPal - The safer, easier way to pay online!">
<img alt="buynow" border="0" 
src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" 
width="1" height="1">
</div>
</form>
</figcaption>
</figure>
</div>

<img src="stanley.jpg" height="300" weight="260" 
style="float:left;margin-right:55px">
<img src="archibald.jpg" height="300" weight="260" 
style="float:left;margin-right:50px">
<p style="clear:both;">

<br>
<br>
<br>
<br>

<img style="float:left;margin-left:525px;margin-right:50px"
 src="maggie.jpg" height="260" weight="300">


<br>
<br>

</article>

</section>

<footer>
<div style="text-align:center" id="banner">
<img src="banner3.jpg" border="0" alt="Banner3">
</div>
</footer>

</body>
</html>

如果您发现有什么问题，请告诉我。谢谢！

【问题讨论】：

我现在没有时间为您整理，但您需要为每个产品创建一个容器 div。然后，该容器内将有 2 个 div，一个用于图形，一个用于 PayPal 按钮。您可以在 div 上设置宽度、浮动、边距等，以便您的图像和按钮彼此重叠，按钮居中，然后您可以为每个产品重复该容器。容器的右侧或左侧会有一些边距，以便将它们均匀地隔开。

标签： jquery html css paypal figure

【解决方案1】：

我希望我明白了，你想做什么：

将标题、下拉菜单和按钮放在图片上方。
将元素水平居中，以图像的宽度为基准。
对每张图片重复此模式
将图像彼此相邻排列在同一高度上。

为此，您需要某种包装器。这是一个过于简单的例子：

HTML

<div class="wrapper">

  <div class="item">
    <div class="item-info">
      <h1>Wesson</h1>
      <!-- Add Paypal form code here -->
    </div>
    <img src="wesson.jpg">
  </div>

  <!-- Repeat the .item code for the next item -->

</div>

CSS

.item {
  float:left; /* Enable the next item to sit next to this one */
  margin-right: 10px; /* The margin between this and the next item */
  text-align: center; /* Center all text inside the item */
}

/* Avoid extra space after the last item */
.item:last-of-type { margin-right: 0; }

/* Center the dropdown inside the item */
.item select { margin: 0 auto; }

/* A better way would be to give the input a class like .button and use this selector here */
.item input[type="image"] {
  display: block; /* Make it a block level element to force it on its own line */
  margin: 0 auto; /* Center the button inside the item */
}

还有一点代码解释：
我将每个内容块称为一个项目。该项目包括图像、标题和贝宝表单。容器 div (.item) 缩小到最大子元素的宽度。在这种情况下，图像。其他所有项目都在 div 内居中。你得到的是一个块，它扩展到其最宽的子元素并根据需要扩展高度。

现在可以为下一个元素重复此代码。这两个都浮动到左侧，如果父容器 (.wrapper) 足够宽，它们可以彼此相邻。 .wrapper 用于设置项目的边界。您可以为其添加边距以定义这些元素在页面上的位置。如果它足够宽以将 3 个项目彼此相邻放置，它会这样做，但一旦它变窄为 3 个，就会进入下一行。

一个活生生的例子
我在 codepen 上整理了一个示例，其中包含您的部分代码。
你可以在这里看到它： http://codepen.io/anon/pen/BywgqL?editors=110

【讨论】：