我的页面目前看起来像这样: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>
如果您发现问题所在，请告诉我。谢谢!
最佳答案
我希望我得到了，你想做什么:
- 将标题、下拉菜单和按钮放在图片上方。
- 将元素水平居中，以图像的宽度为基础。
- 对每张图片重复此模式
- 将图片并排排列在同一高度。
为此，您需要某种包装器。 这是一个过于简单的例子:
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 */
}
还有一点代码解释:
我将每个内容 block 称为一个元素。该元素包括图像、标题和 Paypal 表格。容器 div (.item) 缩小到最大子元素的宽度。在这种情况下，图像。
每个其他元素都在 div 内居中。您得到的是一个 block ，它扩展到其最宽的子元素并根据需要扩展高度。
现在可以为下一个元素重复此代码。这两个都向左浮动，如果父容器 (.wrapper) 足够宽，它们可以并排放置。 .wrapper 用于设置元素的边界。您可以为其添加边距以定义这些元素在页面上的位置。如果它足够宽，可以将 3 个元素并排放置，它就会这样做，但一旦它变窄到 3 个，一个就会进入下一行。
一个活生生的例子
我在 codepen 上将一个示例和您的部分代码放在一起。
你可以在这里看到它:
http://codepen.io/anon/pen/BywgqL?editors=110
关于jquery - 将 PayPal 按钮变成图像标题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28242499/