我试图将地壳定位在中间，即使是不同的尺寸。但随着我改变地壳的大小，它似乎会降低。我尝试在地壳上添加风格，但它似乎没有停留。我还将创建一个js小提琴来展示一切： https://jsfiddle.net/x893h72p/11/
js小提琴上的图像比我的大，但我不知道如何链接我的实际图像。那可以吗？
谢谢。
这是我的hmtl：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Pietro's Pizza</title>
<script type="text/javascript" src="./js/jquery.js"></script>
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>
<body class="bodyDiv">
<header class="headerBox" id="top">
<img src="images/logo.png" width=250px height=250px>
</header>
<article>
<form>
<div class="bannerBox">
<div class="bannerColumn center">
<select id="sizeId" size="1" name="pizza_size" class="pizzaSize">
<option data-name="title" selected disabled>Select Pizza Size:</option>
<option value="4" data-name="Extra Large Pizza" data-price="12.50">Extra Large</option>
<option value="3" data-name="Large Pizza" data-price="10.00">Large</option>
<option value="2" data-name="Medium Pizza" data-price="7.50">Medium</option>
<option value="1" data-name="Small Pizza" data-price="5.00">Small</option>
</select>
</div>
<div class="bannerColumn2 center noRightMargin">
<select id="crustId" size="1" name="crust_type" class="pizzaCrust">
<option data-name="title" selected disabled>Select Crust Type:</option>
<option value="1" data-name="Cracker Crust" data-price="0.25">Cracker</option>
<option value="2" data-name="Thin Crust" data-price="0.50">Thin</option>
<option value="3" data-name="Regular Crust" data-price="0.00">Regular</option>
<option value="4" data-name="Thick Crust" data-price="1.00">Thick</option>
</select>
</div>
</div>
<div class="threeTextBox">
<div class="textColumn1 hidden" id="toppingsId" >
<b>Select Toppings:</b><br>
<p>
<input type="checkbox" name="extra_cheese_box" id="extraCheeseBox"
value ="1" data-label-id="extraCheeseLabel" class="pizzaTopping"
data-price=".25" data-name="Extra Cheese"
data-image="images/04extracheese.png" data-layer="4">
<label for="extraCheeseBox" id="extraCheeseLebel"><span><span></span></span>Extra Cheese</label><br>
<input type="checkbox" name="pepperoni_box" id="pepperoniBox"
value ="2" data-label-id="pepperoniLabel" class="pizzaTopping"
data-price=".50" data-name="Pepperoni"
data-image="images/05pepperoni.png" data-layer="5">
<label for="pepperoniBox" id="pepperoniLebel"><span><span></span></span>Pepperoni</label><br>
<input type="checkbox" name="ham_box" id="hamBox"
value ="3" data-label-id="hamLabel" class="pizzaTopping"
data-price=".75" data-name="Ham"
data-image="images/06ham.png" data-layer="6">
<label for="hamBox" id="hamLebel"><span><span></span></span>Ham</label><br>
<input type="checkbox" name="bacon_box" id="baconBox"
value ="4" data-label-id="baconLabel" class="pizzaTopping"
data-price="1.00" data-name="Bacon"
data-image="images/07bacon.png" data-layer="7">
<label for="baconBox" id="baconLebel"><span><span></span></span>Bacon</label><br>
<input type="checkbox" name="beef_box" id="beefBox"
value ="5" data-label-id="beefLabel" class="pizzaTopping"
data-price=".75" data-name="Beef"
data-image="images/08beef.png" data-layer="8">
<label for="beefBox" id="beefLebel"><span><span></span></span>Beef</label><br>
<input type="checkbox" name="shrimp_box" id="shrimpBox"
value ="6" data-label-id="shrimpLabel" class="pizzaTopping"
data-price="1.50" data-name="Shrimp"
data-image="images/09shrimp.png" data-layer="9">
<label for="shrimpBox" id="shrimpLebel"><span><span></span></span>Shrimp</label><br>
<input type="checkbox" name="anchovy_box" id="anchovyBox"
value ="7" data-label-id="anchovyLabel" class="pizzaTopping"
data-price="1.00" data-name="Anchovy"
data-image="images/10anchovy.png" data-layer="10">
<label for="anchovyBox" id="anchovyLebel"><span><span></span></span>Anchovy</label><br>
<input type="checkbox" name="tomato_box" id="tomatoBox"
value ="8" data-label-id="tomatoLabel" class="pizzaTopping"
data-price=".20" data-name="Tomato"
data-image="images/11tomato.png" data-layer="11">
<label for="tomatoBox" id="tomatoLebel"><span><span></span></span>Tomato</label><br>
<input type="checkbox" name="mushrooms_box" id="mushroomsBox"
value ="9" data-label-id="mushroomsLabel" class="pizzaTopping"
data-price=".30" data-name="Mushrooms"
data-image="images/12mushrooms.png" data-layer="12">
<label for="mushroomsBox" id="mushroomsLebel"><span><span></span></span>Mushrooms</label><br>
<input type="checkbox" name="green_peppers_box" id="greenPeppersBox"
value ="10" data-label-id="greenPeppersLabel" class="pizzaTopping"
data-price=".25" data-name="Green Peppers"
data-image="images/13greenpeppers.png" data-layer="13">
<label for="greenPeppersBox" id="greenPeppersLebel"><span><span></span></span>Green Peppers</label><br>
<input type="checkbox" name="black_olives_box" id="blackOlivesBox"
value ="11" data-label-id="blackOlivesLabel" class="pizzaTopping"
data-price=".45" data-name="Black Olives"
data-image="images/14blackolives.png" data-layer="14">
<label for="blackOlivesBox" id="blackOlivesLebel"><span><span></span></span>Black Olives</label><br>
<input type="checkbox" name="green_olives_box" id="greenOlivesBox"
value ="12" data-label-id="greenOlivesLabel" class="pizzaTopping"
data-price=".40" data-name="Green Olives"
data-image="images/15greenolives.png" data-layer="15">
<label for="greenOlivesBox" id="greenOlivesLebel"><span><span></span></span>Green Olives</label><br>
<input type="checkbox" name="onion_box" id="onionBox"
value ="13" data-label-id="onionLabel" class="pizzaTopping"
data-price=".15" data-name="Onion"
data-image="images/16onion.png" data-layer="16">
<label for="onionBox" id="onionLebel"><span><span></span></span>Onion</label><br>
<input type="checkbox" name="pineapple_box" id="pineappleBox"
value ="14" data-label-id="pineappleLabel" class="pizzaTopping"
data-price=".65" data-name="Pinapple"
data-image="images/17pineapple.png" data-layer="17">
<label for="pineappleBox" id="pineapppleLebel"><span><span></span></span>Pineapple</label><br>
<input type="checkbox" name="hot_banana_peppers_box" id="hotBananaPeppersBox"
value ="15" data-label-id="hotBananaPeppersLabel" class="pizzaTopping"
data-price=".65" data-name="Hot Banana Peppers"
data-image="images/18hotbananapeppers.png" data-layer="18">
<label for="hotBananaPeppersBox" id="hotBananaPeppersLebel"><span><span></span></span>Hot Banana Peppers</label><br>
<input type="checkbox" name="jalapeno_peppers_box" id="jalapenoPeppersBox"
value ="16" data-label-id="jalapenoPeppersLabel" class="pizzaTopping"
data-price=".85" data-name="Jalapeno Peppers"
data-image="images/19jalapenopeppers.png" data-layer="19">
<label for="jalapenoPeppersBox" id="jalapenoPeppersLebel"><span><span></span></span>Jalapeno Peppers</label><br>
<input type="checkbox" name="basil_box" id="basilBox"
value ="17" data-label-id="basilLabel" class="pizzaTopping"
data-price=".15" data-name="Basil"
data-image="images/20basil.png" data-layer="20">
<label for="basilBox" id="basilLebel"><span><span></span></span>Basil</label><br>
</p>
</div>
<div class="textColumn2" id="pizzaImage">
<img id="layer1" src="images/01crust.png" class="hidden" style=" position: absolute; top: 350px; ">
<img id="layer2" src="images/02sauce.png" class="hidden">
<img id="layer3" src="images/03cheese.png" class="hidden">
<img id="layer4" src="images/04extracheese.png" class="hidden">
<img id="layer5" src="images/05pepperoni.png" class="hidden">
<img id="layer6" src="images/06ham.png" class="hidden">
<img id="layer7" src="images/07bacon.png" class="hidden">
<img id="layer8" src="images/08beef.png" class="hidden">
<img id="layer9" src="images/09shrimp.png" class="hidden">
<img id="layer10" src="images/10anchovy.png" class="hidden">
<img id="layer11" src="images/11tomato.png" class="hidden">
<img id="layer12" src="images/12mushrooms.png" class="hidden">
<img id="layer13" src="images/13greenpeppers.png" class="hidden">
<img id="layer14" src="images/14blackolives.png" class="hidden">
<img id="layer15" src="images/15greenolives.png" class="hidden">
<img id="layer16" src="images/16onion.png" class="hidden">
<img id="layer17" src="images/17pineapple.png" class="hidden">
<img id="layer18" src="images/18hotbananapeppers.png" class="hidden">
<img id="layer19" src="images/19jalapenopeppers.png" class="hidden">
<img id="layer20" src="images/20basil.png" class="hidden">
</div>
<div class="textColumn3 center noRightMargin">
<div class="itemDiv hidden" id="toppingItem">
<b>Pizza Items:</b><br>
</div>
<div class="priceDiv hidden" id="toppingPrice">
<b> </b><br>
</div>
<div class="orderBtnBox hidden" id="orderBtn">
<input type="submit" class="button round center" id="orderBtn" value="Place Order">
</div>
</div>
</form>
</article>
<footer class="threeFooterBox">
<div class="footerColumn">
<h3>
Links:
</h3>
<p>
<a href="#top">Home</a><br>
<a href="#">Menu</a><br>
<a href="#">Catering</a><br>
<a href="#contactInfo">Contact Us</a>
</p>
</div>
<div class="footerColumnTable">
<h3 class="center">
Hours:
</h3>
<table width="280" border="0" cellpadding="4" cellspacing="0" class="hoursTable">
<tbody>
<tr align="left" valign="top">
<td>Sunday - Thursday</td>
<td>11:00 am - 10:00pm</td>
</tr>
<tr align="left" valign="top">
<td>Friday - Saturday</td>
<td>11:00am - 11:00pm</td>
</tr>
</tbody>
</table>
</div>
<div class="footerColumn" id="contactInfo">
<h3>
Contact Us:
</h3>
<p>
123 Main Street<br>
Ourtown, Ontario<br>
L1A 2B3
</p><p>
905 434 9191<br>
<a href="mailto:pietro@pizza.com" target="_top">pietro@pizza.com</a>
</p>
</div>
<div class="footerColumnImage">
<img src="images/logo_black.jpg">
</div>
</footer>
</div> <!-- end .container -->
<script type="text/javascript" src="./js/main.js"></script>
</body>
</html>
答案 0 :(得分：0)
我使用了一些技巧，你可能会发现它很有用..
http://webserver.network.local/first-page/以下将图像居中于其相对容器。