Disable line breaks using CSS

Question

I have a canvas element inside a div element. The canvas size can change, and I want it vertical centered. I'm using this CSS approach:

<!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>

You can see it working on this fiddle: http://jsfiddle.net/8FPxN/

This code works great for me, until the browser resizes under the canvas width. The virtual element defined by the :before selector stands on the first line, and the canvas falls to the second line. I'm trying to keep them sticked, avoiding the line break, and showing scroll bars when needed. Adding the overflow:auto rule to the container shows the scroll bars, but the line keeps breaking.

The canvas size can change, so the top:50%; margin-top:- ($canvas_height / 2); approach is not suitable for this. Well, it can be, but I prefer not to control the margin-top using JavaScript. Just CSS would be great.

Any ideas? Thanks!

score 25 · Accepted Answer · answered May 05 '13 at 10:16

25

It seems (from limited testing) that adding white-space: nowrap; works:

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

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

Updated JS Fiddle demo.

answered May 05 '13 at 10:16

David Thomas

249,100
51
377
410

Timidfriendly · Answer 2 · 2013-05-05T16:40:39.460

3

Adding white-space:nowrap should do the trick. http://jsfiddle.net/David_Knowles/aEvG5/

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

EDIT: correct fiddle

edited May 05 '13 at 16:40

answered May 05 '13 at 10:18

Timidfriendly

3,224
4
27
36

Thanks! Your answer is correct, but your fiddle is not related. – Joan Botella May 05 '13 at 14:59

Disable line breaks using CSS

2 Answers2

Linked