出于某种原因，我似乎无法将图片放在中心位置。我必须能够将横幅图片与背后的背景图片对齐。通常我可以在auto上使用margin-left和margin-right，但它会起作用，但这次不是。
body {
background-image: url('background.png');
font-size: 8pt;
font-family: Verdana, Tahoma, sans-serif;
margin: none;
padding: none;
}
#banner {
background-image: url('bannerbg.png');
background-repeat: repeat;
height: auto;
width: auto;
}
.bannerimg {
margin-left: auto;
margin-right: auto;
}
h1 {
font-size: 24pt;
font-weight: bold;
font-family: Tahoma, Verdana, sans-serif;
text-shadow: 2px 2px #999999;
text-align: center;
}
#mainarea {
height: 1100px;
width: 900px;
margin-left: auto;
margin-right: auto;
border: 4px gray solid;
border-radius: 20px;
}
#minfo {
float: right;
}
#rotper {
width: auto;
height: 83px;
background-image: url('rbg.png');
background-repeat: repeat-x;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
}
span {
font-size: 48px;
color: red;
font-weight: bold;
position: relative;
left: 35px;
bottom: 20px;
}
#ovimg {
/*position:relative;
left:192px;*/
border-top-right-radius: 16px;
}
#w3c {
float: right;
position: relative;
/* margin-top:10px;*/
clear: right;
bottom: 90px;
}
.reviews {
-webkit-column-count: 2;
/* Chrome, Safari, Opera */
-moz-column-count: 2;
/* Firefox */
column-count: 2;
-webkit-column-width: 47%;
/* Chrome, Safari, Opera */
-moz-column-width: 47%;
/* Firefox */
column-width: 47%;
-webkit-column-gap: 2%;
/* Chrome, Safari, Opera */
-moz-column-gap: 2%;
/* Firefox */
column-gap: 2%;
height: 790px;
padding-left: 10pt;
padding-top: 10pt;
}
p {
font-size: 8pt;
font-weight: bold;
margin: 5px;
margin-top: 10px;
}
.rvws {
background-color: #e8dc9b;
border: 2px gray solid;
border-width: medium;
border-radius: 10px;
width: 200px;
padding: 5px;
}
.pnumb {
text-align: center;
vertical-align: bottom;
background-color: #a2b964;
width: 700px;
height: 42px;
border-bottom-left-radius: 16px;
border-bottom-right-radius: 16px;
position: relative;
left: -5px;
top: 159px;
}
.crit {
position: relative;
clear: left;
}
/*.cname{
text-align:justify;
clear:right;
}*/
dl {
max-width: 250px;
height: 688px;
background-color: #a2b964;
font-size: 8pt;
font-weight: bold;
font-family: Arial, sans-serif;
position: relative;
top: -13px;
border-bottom-right-radius: 16px;
}
dd {
padding: 10px;
}
dt {
padding-left: 10pt;
padding-right: 10pt;
}
.top {
padding-top: 10px;
}
.troublesome {
position: relative;
left: 200px;
}
#rightcol {
padding-top: 35pt;
}<!DOCTYPE html>
<html>
<head>
<title>TMNT - Rancid Tomatoes</title>
<meta charset="utf-8" />
<link href="movie.css" type="text/css" rel="stylesheet" />
<link rel="icon" type="image/gif" href="rotten.gif" />
</head>
<body>
<div id="banner">
<img src="banner.png" alt="Rancid Tomatoes" class="bannerimg" />
</div>
<h1>TMNT (2007)</h1>
<div id="mainarea">
<div id="minfo">
<div>
<img src="overview.png" alt="general overview" / id="ovimg">
</div>
<dl>
<dt class="top">STARRING</dt>
<dd>Patrick Stewart
<br />Mako
<br />Sarah Michelle Gellar
<br />Kevin Smith</dd>
<dt>DIRECTOR</dt>
<dd>Kevin Munroe</dd>
<dt>RATING</dt>
<dd>PG</dd>
<dt>THEATRICAL RELEASE</dt>
<dd>Mar 23, 2007</dd>
<dt>MOVIE SYNOPSIS</dt>
<dd>After the defeat of their old arch nemesis, The Shredder, the Turtles have grown apart as a family.</dd>
<dt>MPAA RATING</dt>
<dd>PG, for animated action violence, some scary cartoon images and mild language</dd>
<dt>RELEASE COMPANY</dt>
<dd>Warner Bros.</dd>
<dt>RUNTIME</dt>
<dd>90 mins</dd>
<dt>GENRE</dt>
<dd>Action/Adventure, Comedies, Childrens, Martial Arts, Superheroes, Ninjas, Animated Characters</dd>
<dt>BOX OFFICE</dt>
<dd>$54,132,596</dd>
<dt>LINKS</dt>
<dd>
<ul>
<li><a href="http://www.ninjaturtles.com/">The Official TMNT Site</a>
</li>
<li><a href="http://www.rottentomatoes.com/m/teenage_mutant_ninja_turtles/">RT Review</a>
</li>
<li><a href="http://www.rottentomatoes.com/">RT Home</a>
</li>
</ul>
</dd>
</dl>
</div>
<div id="rotper">
<img src="rottenbig.png" alt="Rotten" style="position:relative; left:15px;" />
<span id="33">33%</span>
</div>
<div class="reviews">
<p class="rvws">
<img src="rotten.gif" alt="Rotten" />
<q>Ditching the cheeky, self-aware wink that helped to excuse the concept's inherent corniness, the movie attempts to look polished and 'cool,' but the been-there animation can't compete with the then-cutting-edge puppetry of the 1990 live-action movie.</q>
</p>
<p>
<img src="critic.gif" alt="Critic" class="crit" />Peter Debruge
<br />Variety
</p>
<p class="rvws">
<img src="fresh.gif" alt="Fresh" />
<q>TMNT is a fun, action-filled adventure that will satisfy longtime fans and generate a legion of new ones.</q>
</p>
<p>
<img src="critic.gif" alt="Critic" class="crit" />Todd Gilchrist
<br />IGN Movies
</p>
<p class="rvws">
<img src="rotten.gif" alt="Rotten" />
<q>It stinks!</q>
</p>
<p>
<img src="critic.gif" alt="Critic" class="crit" />Jay Sherman (unemployed)
</p>
<p class="rvws">
<img src="rotten.gif" alt="Rotten" />
<q>The rubber suits are gone and they've been redone with fancy computer technology, but that hasn't stopped them from becoming dull.</q>
</p>
<p>
<img src="critic.gif" alt="Critic" class="crit" />Joshua Tyler
<br />CinemaBlend.com
</p>
<p class="rvws">
<img src="rotten.gif" alt="Rotten" />
<q>YOUR REVIEW HERE</q>
</p>
<p>
<img src="critic.gif" alt="Critic" class="crit" />NAME
<br />PUBLICATION
</p>
<div id="rightcol">
<p class="rvws">
<img src="rotten.gif" alt="Rotten" />
<q>The turtles themselves may look prettier, but are no smarter; torn irreparably from their countercultural roots, our superheroes on the half shell have been firmly co-opted by the industry their creators once sought to spoof.</q>
</p>
<p>
<img src="critic.gif" alt="Critic" class="crit" />Jeannette Catsoulis
<br />New York Times
</p>
<p class="rvws">
<img src="rotten.gif" alt="Rotten" />
<q>Impersonally animated and arbitrarily plotted, the story appears to have been made up as the filmmakers went along.</q>
</p>
<p>
<img src="critic.gif" alt="Critic" class="crit" />Ed Gonzalez
<br />Slant Magazine
</p>
<p class="rvws">
<img src="fresh.gif" alt="Fresh" />
<q>The striking use of image and motion allows each sequence to leave an impression. It's an accomplished restart to this franchise.</q>
</p>
<p>
<img src="critic.gif" alt="Critic" class="crit" />Mark Palermo
<br />Coast (Halifax, Nova Scotia)
</p>
<p class="rvws">
<img src="rotten.gif" alt="Rotten" />
<q>The script feels like it was computer generated. This mechanical presentation lacks the cheesy charm of the three live action films.</q>
</p>
<p>
<img src="critic.gif" alt="Critic" class="crit" />Steve Rhodes
<br />Internet Reviews
</p>
<p class="rvws">
<img src="rotten.gif" alt="Rotten" />
<q>YOUR REVIEW HERE</q>
</p>
<p>
<img src="critic.gif" alt="Critic" class="crit" />NAME
<br />PUBLICATION
</p>
</div>
</div>
<p class="pnumb">(1-10) of 88</p>
</div>
<div id="w3c">
<a href="http://validator.w3.org/check/referer">
<img src="w3c-html.png" alt="Valid HTML5" />
</a>
<br />
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img src="w3c-css.png" alt="Valid CSS" />
</a>
</div>
</body>
</html>
答案 0 :(得分：2)
将text-align：center添加到您的横幅类：
#banner{
background-image:url('bannerbg.png');
background-repeat:repeat;
height:auto;
width:auto;
text-align:center;
}
答案 1 :(得分：1)
margin:0 auto;
display:block;
应该有效
答案 2 :(得分：1)
您没有设置horizontal-align属性。因此，您的css不会设置图像的位置。
因为你使用了良好的编程风格。我不建议使用＆＃34;弃用＆＃34;元素：
<center><yourimage-element /></center>
但是在编写和测试正确的ccs时它仍然可用。
问候