web-dev-qa-db-ja.com

CSSを使用して改行を無効にする

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_セレクターによって定義された仮想要素は最初の行にあり、キャンバスは2番目の行に配置されます。私はそれらを固定し、改行を避け、必要に応じてスクロールバーを表示しようとしています。コンテナに_overflow:auto_ルールを追加すると、スクロールバーが表示されますが、行が途切れ続けます。

キャンバスのサイズは変更される可能性があるため、top:50%; margin-top:- ($canvas_height / 2);アプローチはこれには適していません。そうかもしれませんが、JavaScriptを使用して_margin-top_を制御することは好みません。 CSSだけが素晴らしいでしょう。

何か案は？ありがとう！

cssvertical-alignmentline-breaks
11
Joan Botella

（限られたテストから）white-space: nowrap;を追加すると機能するようです。

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

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

JSを更新Fiddleデモ 。

21
David says reinstate Monica

White-space：nowrapを追加するとうまくいくはずです。 http://jsfiddle.net/David_Knowles/aEvG5/

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

編集：正しいフィドル

2
Timidfriendly