1

我有 2 个项目：一个日历组件和一个按钮。它们的高度/宽度不同。

如何将它们水平和垂直居中排列？

桌子？分区？...

我认为每个对象都有 50% 的区域并以该区域为中心。但是，我可能愿意将它们水平居中（彼此之间有间隙）。然后将它们垂直居中作为一对。

4

2 回答 2

2

这对我有用：http: //jsfiddle.net/bpkH4/。一些 CSS 纯粹是装饰性的。

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    #btn
    {
        background-color:#FF0000;
        width:100px;
        height:30px;
    }

    #comp
    {
        background-color:#00FFFF;
        width:200px;
        height:200px;
    }

    #container
    {
        width:500px;
        height:300px;
        overflow:auto;
        background-color:#CCCCCC;           

        text-align:center;
    }

    .contain
    {

        background-color:#AAAAAA;
        float:left;
        width:50%;
        height:100%;
        position: relative;
    }

    .elem
    {
        position: absolute;
        top:0;
        bottom:0;
        left:0;
        right:0;
        margin:auto;
    }
    </style>
</head>
<body>
    <div id="container">
        <div class="contain">
            <div class="elem" id="comp">Component in Here</div>
        </div>
        <div class="contain">        
            <div class="elem" id="btn">Button</div>
        </div>
    </div>
</body>
</html>
于 2012-11-14T20:31:24.350 回答
0

将它们放在容器 div 中并设置边距：0 auto; 在每个上将它们水平居中。您还可以使用相同的技术在页面上水平居中容器。

CSS 水平对齐

居中：自动宽度边距

对于容器的垂直居中：

6种使用CSS垂直居中的方法

于 2012-11-14T17:59:06.663 回答