Отключить разрывы строк с помощью CSS

У меня есть элемент canvas внутри элемента div. Размер холста может измениться, и я хочу, чтобы он был вертикально по центру. Я использую этот подход 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); не подходит для этого. Ну, это может быть, но я предпочитаю не контролировать margin-top с помощью JavaScript. Просто CSS будет замечательным.

Любые идеи? Спасибо!

Ответ 1

Кажется (из ограниченного тестирования), что добавление white-space: nowrap; работает:

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

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

Обновленная демонстрация JS Fiddle.

Ответ 2

Добавление пробела: nowrap должен делать трюк. http://jsfiddle.net/David_Knowles/aEvG5/

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

EDIT: правильный скрипт