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

div要素内にキャンバス要素があります。キャンバスのサイズは変わる可能性があり、縦に中央に揃えたいと思っています。私は、このCSSのアプローチを使用しています：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);のアプローチはこれには適していません。さて、それは可能ですが、私はmargin-topをJavaScriptで制御したくないです。ちょうどCSSが素晴らしいだろう。

アイデア？ありがとう！

出典

2013-05-05 Joan Botella

white-space: nowrap;作品加えることを（限られたテストからの）ようだ：

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

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

Updated JS Fiddle demoを。

出典

2013-05-05 10:16:31

おかげで、それは魔法のように動作します！ –

あなたは大歓迎です、私は助けになってうれしいです！ –

ホワイトスペースを追加する：nowrapはこのトリックを行う必要があります。 http://jsfiddle.net/David_Knowles/aEvG5/

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

EDIT：正しいフィドル

出典

2013-05-05 10:18:10 Timidfriendly

ありがとう！あなたの答えは正しいですが、あなたのフィドルは関連していません。 –

謝罪今すぐリンクが正しい – Timidfriendly

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

答えて

関連する問題