0
我有3个div并排放在一个盒子里。第三个（最右边的）div里面有一些按钮。水平和垂直居中按钮
但这些按钮没有自我为中心（我的意思是为轴心的垂直&水平方向）。看到蓝色方块应该在红色框内居中的图像，但他们实际上坐得太高，太离左边太远。
你能帮我把我的蓝色按钮水平放置在水平中心&垂直吗？
！ http://i42.tinypic.com/1z18ahs.png 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> </title>
<style type="text/css">
<!--
body {
text-align: center;
margin: 0 auto;
background-color: RGB(197, 155, 109);
font-family: "Arial", "Tahoma", Serif;
font-size: 17px;
}
p { margin: 0; padding: 0; }
#mainContent {
background-color: white;
padding-top: 30px;
display: block;
width: 980px;
margin: 0px auto;
}
#mainContentInner {
/*background-image: url(images/contentBottom.png) 0 bottom no-repeat;*/
padding: 0px 20px 40px 20px;
display: block;
height: 390px;
}
#featureBar {
float: left;
width: 450px;
}
#menuBar {
float: left;
width: 450px;
height: 404px;
background-color: red;
}
.button {
width: 142px;
height: 202px;
cursor: pointer; cursor: hand;
}
.menuButtonRow {
margin: 0 auto;
padding: 0;
list-style-type: none;
list-style-image: none;
}
.menuButtonRow li {
display: inline;
float: left;
margin-left: 5px;
}
-->
</style>
</head>
<body>
<br/>
<div id="mainContent">
<div id="mainContentInner">
<div id="featureBar">
<p style="background-color: green; width: 450px; height: 370px;"></p>
</div>
<div style="float: left; width: 20px; height: 400px; margin: 10px; background-color: RGB(172,225,250);">
<p></p>
</div>
<!-- The 2 unordered lists in this div are supposed to be centred horizontally -->
<div id="menuBar">
<ul class="menuButtonRow">
<li>
<div class="button">
<p style="background-color: blue; width: 142px; height: 190px;"></p>
</div>
</li>
<li>
<div class="button">
<p style="background-color: blue; width: 142px; height: 190px;"></p>
</div>
</li>
<li>
<div class="button">
<p style="background-color: blue; width: 142px; height: 190px;"></p>
</div>
</li>
</ul>
<br/>
<ul class="menuButtonRow">
<li>
<div class="button">
<p style="background-color: blue; width: 142px; height: 190px;"></p>
</div>
</li>
<li>
<div class="button">
<p style="background-color: blue; width: 142px; height: 190px;"></p>
</div>
</li>
<li>
<div class="button">
<p style="background-color: blue; width: 142px; height: 190px;"></p>
</div>
<li>
</ul>
</div>
</div>
</div>
<br/>
<br/>
</body>
</html>