1行の場合はセンタリングを行いますが複数行の場合はセンタリングしません

複数の行を使用する場合は、テキストを1行に収まるように水平に整列できますが、整列は行わず、white-space: normalを実行します（ただし、必ずしも、javascriptなしで）？1行の場合はセンタリングを行いますが複数行の場合はセンタリングしません

出典

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の高さについてのお問い合わせは、必ずしも最適ではありません.Javascriptソリューションは、そこから決定してください。あなたは、DOM要素が1行だけであれば、その高さを知る必要があります。高さがこの値を超える場合は、1つのことを行います。もしそうでなければ、あなたはもう一方をやります。より一般的な出現にデフォルト設定するようにCSSを設定し、少数のケースでのみCSSを変更します。例えば

：あなたはまた、jQueryのを使用することができ

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

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

。 offsetHeightにはパディングが含まれています。

しかし、あなたは本当にJavascriptソリューションを望んでいません。ダイナミックなスタイリングが必要なので、CSSでどうやってやるか考えていない。私はそれが不可能であると主張しているだろう。

出典

2012-03-18 01:46:22 Nick

1行の場合はセンタリングを行いますが複数行の場合はセンタリングしません

答えて

関連する問題