0
ボックスに横に並んでいる3つのdivがあります。 3番目（右端）の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>