Désactiver les sauts de ligne à l'aide de CSS

J'ai une toile élément à l'intérieur d'un élément div. La taille du canevas peut changer, et je veux que verticale centrée. Je suis en utilisant ce CSS approche:

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

Vous pouvez le constater sur ce violon: http://jsfiddle.net/8FPxN/

Ce code fonctionne très bien pour moi, jusqu'à ce que le navigateur est redimensionnée en vertu de la largeur du canevas. L'élément virtuel défini par le :before sélecteur se trouve sur la première ligne, et la toile tombe à la deuxième ligne. J'essaie de garder collé, en évitant la rupture de ligne, et montrant des barres de défilement si nécessaire. L'ajout de la overflow:auto règle pour le conteneur affiche les barres de défilement, mais la ligne continue de casser.

La toile de la taille peut varier, de sorte que le top:50%; margin-top:- ($canvas_height /2); approche n'est pas adaptée pour cela. Eh bien, il peut être, mais je préfère ne pas contrôler la margin-top à l'aide de JavaScript. Juste CSS serait génial.

Des idées? Merci!

OriginalL'auteur Joan Botella | 2013-05-05

  1. 21

    Il me semble (à partir de tests limités) que l'ajout de white-space: nowrap; travaux:

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

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

    Mise à jour JS Fiddle démo.

    Merci, ça fonctionne comme un charme!
    Vous êtes à la très bienvenue, je suis heureux d'avoir eu de l'aide!

    OriginalL'auteur David Thomas

  2. 2

    Ajoutant white-space:nowrap devrait faire l'affaire. http://jsfiddle.net/David_Knowles/aEvG5/

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

    EDIT: correction d'un violon

    Merci! Votre réponse est correcte, mais votre violon n'est pas lié.
    Des excuses. Maintenant, le lien est correct

    OriginalL'auteur Timidfriendly