欢迎光临
我们一直在努力

CSS3:box-pack让内容垂直居中对齐

让内容垂直居中对齐

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
    <meta name="apple-touch-fullscreen" content="yes"/>
    <title>内容垂直居中</title>
    <style>
        div
        {
            width:350px;
            height:100px;
            border:1px solid black;

            /* Firefox */
            display:-moz-box;
            -moz-box-pack:center;
            -moz-box-align:center;

            /* Safari, Chrome, and Opera */
            display:-webkit-box;
            -webkit-box-pack:center;
            -webkit-box-align:center;

            /* W3C */
            display:box;
            box-pack:center;
            box-align:center;
        }
    </style>
</head>
<body>

<div>
    <p>我是居中对齐的。</p>
</div>

<p><b>注释:</b>IE 不支持 box-pack 和 box-align 属性。</p>

</body>
</html>

 

赞(0)
版权归原作者所有,如有侵权请告知。达维营-前端网 » CSS3:box-pack让内容垂直居中对齐

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址