Question

鉴于下面的html，我正在寻找两件事：

澄清：我希望绿色框保持居中，因为它们目前无论高度如何，事实并非如此。顶部：-10px /底部：-10px基于绿色框高度~20px，一旦改变顶部/底部需要重新调整，我想避免！

摆脱绝对top / bottom值（因为绿框的高度可能会有所不同），我尝试在top / margin-top -50%周围使用了多个选项但是无济于事。
中心对齐我的绿色框 - 再次因为它们是绝对定位我无法使它工作。

解决方案必须适用于当前版本的FF和Chrome，我不介意使用CSS3＆amp; HTML5。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div style="height: 400px; width: 30px; border: 1px solid #ccc; margin: 50px auto auto 50px;">
        <table style="table-layout: fixed; border-collapse: collapse; height: 100%; width: 100%;">
            <tr>
                <td style="height: 50%;">
                    <div style="height: 100%; width: 100%; position: relative;">
                        <div style="top: -10px; border: 1px solid #ccc; background-color: Green; position: absolute; ">A</div>   
                        <div style="bottom: -10px; border: 1px solid #ccc; background-color: Green; position: absolute;">B</div>   
                    </div>
                </td>
            </tr>
            <tr>
                <td style="height: 50%;">
                    <div style="height: 100%; width: 100%; position: relative;">
                        <div style="bottom: -10px; border: 1px solid #ccc; background-color: Green; position: absolute;">C</div>   
                    </div>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

Answer 1

试试这段代码：

HTML：

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>

    <body>
        <div id="container">
            <div class="product" align="center">A</div>
            <div class="product" align="center">B</div>
            <div class="product" align="center">C</div>
        </div>
    </body>
</html>

CSS：

#container{position:relative; width:30px; height:400px; border:1px solid #CCCCCC;   margin: 50px auto auto 50px; }



.product {position:relative; margin-top:20px; margin-left:5px; margin-right:5px; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; background-color:Green;}

需要Html Uniform Panel CSS帮助

1 个答案: