CSS

kullanarak satır sonlarını devre dışı bırak Bir div öğesinin içinde bir tuval öğesi var. Tuval boyutu değişebilir ve dikey olarak ortalanmasını istiyorum. Bu CSS yaklaşımı kullanıyorum: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>

Bunu bu keman üzerinde çalışan görebilirsiniz: tarayıcı tuval genişliği altında boyutlandırır kadar http://jsfiddle.net/8FPxN/

Bu kod, benim için harika çalışıyor. :before seçicisi tarafından tanımlanan sanal eleman ilk satırda durur ve tuval ikinci satıra düşer. Yapışmaları engellemeye, hat kesintisinden kaçınmaya ve gerektiğinde kaydırma çubuklarını göstermeye çalışıyorum. Kapsayıcıya overflow:auto kuralının eklenmesi kaydırma çubuklarını gösterir, ancak satır kırılmaya devam eder.

Tuval boyutu değişebilir, bu nedenle top:50%; margin-top:- ($canvas_height/2); yaklaşımı bunun için uygun değildir. Olabilir, ama ben JavaScript kullanarak margin-top kontrol etmemeyi tercih ederim. Sadece CSS harika olurdu.

Herhangi bir fikrin var mı? Teşekkürler!

kaynak

2013-05-05 Joan Botella

O (belirli testlerinden) görünüyor ki white-space: nowrap; ekleyerek çalışır:

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

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

Updated JS Fiddle demo.

kaynak

2013-05-05 10:16:31

sayesinde bir cazibe gibi çalışır! –

Siz * çok * hoş geldiniz, yardım ettiğim için mutluyum! –

Beyaz boşluk ekleniyor: nowrap hile yapmalıdır. http://jsfiddle.net/David_Knowles/aEvG5/

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

DÜZENLEME: Doğru keman

kaynak

2013-05-05 10:18:10 Timidfriendly

Teşekkürler! Cevabınız doğru ama kemanın ilgisi yok. –

Özür dilerim. Şimdi bağlantı doğru – Timidfriendly

cevap

İlgili konular