Question

我在div元素中有一个canvas元素。画布大小可以改变，我希望它垂直居中。我正在使用这种CSS方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Vertical Centering</title>

    <style>
        html,
        body{
            height:100%;
            width:100%;
            margin:0;
            padding:0;
        }
        #container{
            width:100%;
            height:100%;
            text-align:center;
            font-size:0;

            background:#aae;
        }
        #container:before{
            content:'';
            display:inline-block;
            height:100%;
            vertical-align:middle;
        }

        canvas{
            width:400px;
            height:300px;

            display:inline-block;
            vertical-align:middle;

            background:#fff;
        }
    </style>
</head>
<body>

    <div id="container">
        <canvas></canvas>
    </div>

</body>
</html>

你可以看到它在这个小提琴上工作：http://jsfiddle.net/8FPxN/

此代码非常适合我，直到浏览器在画布宽度下调整大小。由:before选择器定义的虚拟元素位于第一行，画布属于第二行。我试图让它们保持坚持，避免换行，并在需要时显示滚动条。将overflow:auto规则添加到容器中会显示滚动条，但该行会一直断开。

画布大小可能会发生变化，因此top:50%; margin-top:- ($canvas_height / 2);方法不适用于此。好吧，它可以，但我不想使用JavaScript来控制margin-top。只是CSS会很棒。

有什么想法吗？谢谢！

Answer 1

似乎（来自有限的测试）添加white-space: nowrap;有效：

#container{
    width:100%;
    height:100%;
    text-align:center;
    font-size:0;

    background:#aae;
    white-space: nowrap;
}

Updated JS Fiddle demo

Answer 2

添加空格：nowrap应该可以解决问题。 http://jsfiddle.net/David_Knowles/aEvG5/

#container{
    width:100%;
    height:100%;
    text-align:center;
    font-size:0;
    white-space:nowrap;
}

编辑：正确的小提琴

使用CSS禁用换行符

2 个答案: