Question

我有3个div并排放在一个盒子里。第3个（最右边）的div里面有一些按钮。

但是这些按钮本身并不居中（我的意思是垂直和水平居中）。请看蓝色框应该在红色框内居中的图像，但它们实际上位置太高＆amp;离左边太远。

你能帮我把蓝色按钮放在水平居中的地方吗？垂直？

！http://i42.tinypic.com/1z18ahs.png enter image description here

<!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>

Answer 1

要使按钮水平居中，＃menuBar宽度应为446px而不是450px。

要使按钮垂直居中，。按钮高度应为190px，＃menuBar高度应为395px。

演示：http://jsfiddle.net/kvqpy/1/

水平中心按钮＆amp;垂直

1 个答案: