У меня есть 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>