Deaktivieren Sie Zeilenumbrüche mit CSS

Ich habe ein Canvas-Element in einem Div-Element. Die Leinwandgröße kann sich ändern, und ich möchte, dass sie vertikal zentriert ist. Ich verwende diesen CSS-Ansatz:Deaktivieren Sie Zeilenumbrüche mit 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>

Sie sehen es auf dieser Geige arbeiten: http://jsfiddle.net/8FPxN/

Dieser Code funktioniert gut für mich, bis der Browser unter der Leinwand Breite skaliert. Das durch den Selektor :before definierte virtuelle Element steht in der ersten Zeile, und die Zeichenfläche fällt in die zweite Zeile. Ich versuche, sie festzuhalten, den Zeilenumbruch zu vermeiden und bei Bedarf Bildlaufleisten anzuzeigen. Wenn Sie dem Container die overflow:auto-Regel hinzufügen, werden die Bildlaufleisten angezeigt, aber die Zeile wird unterbrochen.

Die Leinwandgröße kann sich ändern, daher ist der top:50%; margin-top:- ($canvas_height/2); Ansatz dafür nicht geeignet. Nun, es kann sein, aber ich bevorzuge es nicht, die margin-top mit JavaScript zu steuern. Nur CSS wäre großartig.

Irgendwelche Ideen? Vielen Dank!

Quelle

2013-05-05 Joan Botella

Es scheint (aus begrenzten Tests), dass das Hinzufügen white-space: nowrap; Werke:

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

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

Updated JS Fiddle demo.

Quelle

2013-05-05 10:16:31

Dank, es funktioniert wie ein Charme! –

Du bist * sehr * willkommen, ich bin froh, dass ich dir geholfen habe! –

Hinzufügen von Leerraum: nowrap sollte den Trick tun. http://jsfiddle.net/David_Knowles/aEvG5/

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

EDIT: richtig Geige

Quelle

2013-05-05 10:18:10 Timidfriendly

Danke! Deine Antwort ist richtig, aber deine Geige ist nicht verwandt. –

Entschuldigung. Jetzt ist der Link korrekt – Timidfriendly

Deaktivieren Sie Zeilenumbrüche mit CSS

Antwort

Verwandte Themen