Disabilitare le interruzioni di riga utilizzando i CSS

Ho un elemento canvas all'interno di un elemento div. Le dimensioni della tela possono cambiare e lo voglio centrato in verticale. Sto usando questo approccio CSS:Disabilitare le interruzioni di riga utilizzando i 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>

Potete vederlo lavorare su questo violino: http://jsfiddle.net/8FPxN/

Questo codice funziona grande per me, fino a quando il browser ridimensiona sotto la larghezza dell'area di lavoro. L'elemento virtuale definito dal selettore :before si trova sulla prima riga e la tela cade sulla seconda riga. Sto cercando di tenerli incollati, evitando l'interruzione di riga e mostrando le barre di scorrimento quando necessario. L'aggiunta della regola overflow:auto al contenitore mostra le barre di scorrimento, ma la linea continua a interrompersi.

Le dimensioni della tela possono cambiare, pertanto l'approccio top:50%; margin-top:- ($canvas_height/2); non è adatto a questo. Beh, può essere, ma preferisco non controllare il margin-top utilizzando JavaScript. Solo i CSS sarebbero fantastici.

Qualche idea? Grazie!

fonte

2013-05-05 Joan Botella

Sembra (da test limitati) che l'aggiunta di white-space: nowrap; opere:

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

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

Updated JS Fiddle demo.

fonte

2013-05-05 10:16:31

Grazie, funziona come un fascino! –

Sei * molto * benvenuto, sono felice di essere stato di aiuto! –

Aggiunta di spazio bianco: nowrap dovrebbe fare il trucco. http://jsfiddle.net/David_Knowles/aEvG5/

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

EDIT: corretto violino

fonte

2013-05-05 10:18:10 Timidfriendly

Grazie! La tua risposta è corretta, ma il tuo violino non è correlato. –

Scuse. Ora il link è corretto – Timidfriendly

Disabilitare le interruzioni di riga utilizzando i CSS

risposta

Problemi correlati