Question

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

如何将它们水平和垂直对齐？

表？ DIV？ ...

我认为每个物体占有50％的面积，并且以此为中心。但是，我可能愿意将它们（在彼此之间有一个间隙）水平对中。然后将它们垂直对中。

Answer 1

这对我有用：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>

Answer 2

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

CSS Horizontal Align

Centering: Auto-width Margins

对于容器的垂直居中：

6 Methods For Vertical Centering With CSS

HTML5 / CSS3中心水平和垂直居中2个项目

2 个答案: