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 선택기로 정의 된 가상 요소가 첫 번째 줄에 표시되고 캔버스가 두 번째 줄로 떨어집니다. 줄 바꿈을 피하고 필요한 경우 스크롤 막대를 표시하면서 막대 그래프를 유지하려고합니다. 컨테이너에 overflow:auto 규칙을 추가하면 스크롤 막대가 표시되지만 줄은 계속 손상됩니다.

캔버스 크기가 변경 될 수 있으므로 top:50%; margin-top:- ($canvas_height/2); 접근 방식은 적합하지 않습니다. 글쎄, 그렇지만, 나는 JavaScript를 사용하여 margin-top을 제어하지 않는 것을 선호한다. 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; 
}

편집 : 올바른 바이올린

출처

2013-05-05 10:18:10 Timidfriendly

감사! 답은 맞지만 바이올린은 관련이 없습니다. –

사과. 이제 링크가 맞습니다. – Timidfriendly

CSS를 사용하여 줄 바꿈 사용 안 함

답변

관련 문제