한 줄이면 가운데 맞추기가 가능하지만 여러 줄이면 가운데 맞추기 없음

한 줄에 맞으면 가운데 맞추기를 수평으로 정렬 할 수 있지만 가운데 줄을 정렬하지 않고 여러 줄을 사용하는 경우 white-space: normal 반드시, 자바 스크립트없이)?한 줄이면 가운데 맞추기가 가능하지만 여러 줄이면 가운데 맞추기 없음

출처

2012-03-18 sawa

다음은 HTML + CSS 솔루션입니다.

트릭은 다음과 같습니다는 내용의 크기로 축소 있도록  내부

는 display: inline-box; 속성이 있습니다.
는 의 크기가 의 폭보다 작은 경우가 있으므로 text-align: center이 중심 보유한다.
 그래서 텍스트 실제로 왼쪽 정렬됩니다 text-align: left 있습니다.

<!DOCTYPE html> <html> 
    <head> 
     <title>Center</title> 
     <style type="text/css"> 
      .big-box { 
       text-align: center; 
       width: 40em; 
       border: 1px solid red; 
      } 
      .center-if-single-line { 
       text-align: left; 
       display: inline-block; 
       border: 1px solid blue; 
      } 
     </style> 
    </head> 
    <body> 
     <div> 
      <h1>Small</h1> 
      <p class="big-box"> 
       <span class="center-if-single-line"> 
        All your line are belong to us! 
       </span> 
      </p> 
      <h1>Big</h1> 
      <p class="big-box"> 
       <span class="center-if-single-line"> 
        All your line are belong to us! 
        All your line are belong to us! 
        All your line are belong to us! 
        All your line are belong to us! 
        All your line are belong to us! 
        All your line are belong to us! 
        All your line are belong to us! 
        All your line are belong to us! 
        All your line are belong to us! 
        All your line are belong to us! 
        All your line are belong to us! 
        All your line are belong to us! 
        All your line are belong to us! 
        All your line are belong to us! 
        All your line are belong to us! 
       </span> 
      </p> 
     </div> 
    </body> 
</html>

출처

2012-03-18 04:03:37 wks

좋아요. 이것은 완벽 해. – sawa

와우 ... 그냥 ... 와우! 매우 멋진 :) +1 – Hristo

자바 스크립트 솔루션은 반드시 최고의 것은 아니지만 div/p의 높이에 대해 문의하고 거기에서 결정을 내리는 것입니다. 한 줄만 있으면 DOM 요소의 높이를 알아야합니다. 높이가이 값을 초과하는 경우 한 가지 작업을 수행합니다. 그렇지 않다면, 당신은 다른 것을합니다. CSS를 기본 설정으로 설정하여 소수의 경우에만 변경하십시오. 예를 들어

는 :

var tag = document.getElementById("id_here"); 

if(tag.offsetHeight > 18){ 
    tag.style.textAlign = "left"; 
    tag.style.whiteSpace = "normal";}

또한 jQuery를 사용할 수 있습니다. offsetHeight에는 패딩이 포함됩니다.

하지만 자바 스크립트 솔루션을 실제로 원하지는 않습니다. 동적 인 스타일링을 포함하기 때문에 CSS에서 어떻게 할 수 있을지 생각할 수 없습니다. 나는 그것이 가능하지 않다고 비판적으로 제안 할 것이다.

출처

2012-03-18 01:46:22 Nick

한 줄이면 가운데 맞추기가 가능하지만 여러 줄이면 가운데 맞추기 없음

답변

관련 문제