Wyłączanie podziałów wierszy za pomocą CSS

Mam element canvas wewnątrz elementu div. Rozmiar płótna może się zmienić i chcę go wyśrodkować w pionie. Używam tego podejścia CSS:Wyłączanie podziałów wierszy za pomocą 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>

Widać to działa na tej skrzypce: http://jsfiddle.net/8FPxN/

Ten kod działa dla mnie świetnie, dopóki przeglądarka zmienia rozmiar na podstawie szerokości płótna. Element wirtualny zdefiniowany przez selektor :before stoi w pierwszej linii, a płótno spada do drugiej linii. Staram się trzymać je przylepione, unikając łamania linii i wyświetlając paski przewijania w razie potrzeby. Dodanie do kontenera reguły overflow:auto pokazuje paski przewijania, ale linia wciąż pęka.

Rozmiar płótna może się zmienić, więc podejście top:50%; margin-top:- ($canvas_height/2); nie nadaje się do tego. Cóż, może być, ale ja wolę nie kontrolować margin-top przy użyciu JavaScript. Po prostu CSS byłby świetny.

Wszelkie pomysły? Dzięki!

Źródło

2013-05-05 Joan Botella

Wydaje (od ograniczonego badania), że dodanie white-space: nowrap; prace:

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

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

Updated JS Fiddle demo.

Źródło

2013-05-05 10:16:31

Dzięki, działa jak marzenie! –

Jesteś * bardzo * mile widziany, cieszę się, że mogłem pomóc! –

Dodawanie białej przestrzeni: nowrap powinien załatwić sprawę. http://jsfiddle.net/David_Knowles/aEvG5/

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

EDIT: poprawna skrzypce

Źródło

2013-05-05 10:18:10 Timidfriendly

Dzięki! Twoja odpowiedź jest prawidłowa, ale twoje skrzypce nie są powiązane. –

Przeprosiny. Teraz link jest poprawny – Timidfriendly

Wyłączanie podziałów wierszy za pomocą CSS

Odpowiedz

Powiązane problemy