段落要素を縦に整列しようとしています

私は段落要素をその親のdivの中央（垂直）に表示するための単純なCSSをいくつか持っています。段落要素を縦に整列しようとしています

問題：段落要素は、常に上端に位置する中間に垂直に配置されません。このソリューションは、Safari（iPadのSafariバージョン専用）で動作する必要があります。

私の段落要素を真ん中に垂直に配置する方法を知っていますか？

<html> 
<head> 

    <style type="text/css"> 
    <!-- 
     .ButtonBox { 
      cursor: pointer; 
      vertical-align: middle; 
      text-align: center; 
      background-color: blue; 
      height: 200px; 
     } 

     .buttonBoxContainer { 
      cursor: pointer; 
     } 
    --> 
    </style> 
</head> 
<body> 

    <div class="ButtonBox"> 
     <p class="buttonBoxContainer">Press Me</p> 
    </div> 

</body> 
</html>

出典

2011-11-08 Jake M

あなたのボックスは常にあなたがhereを示すように、段落要素を中心に行の高さを使用することができ、静的な高さを持つことになります。

静的でない場合は、（私の経験上）最良の解決策はjavascriptを使用することです。

<html> 
<head> 
    <style> 

     .ButtonBox { 
      cursor: pointer; 
      vertical-align: middle; 
      text-align: center; 
      background-color: blue; 
      height: 200px; 
      color: #fff; 
     } 

     .buttonBoxContainer { 
      cursor: pointer; 
      line-height: 200px; 
     } 
    </style> 
</head> 
<body> 

    <div class="ButtonBox"> 
     <p class="buttonBoxContainer">Press Me</p> 
    </div> 

</body> 
</html>

出典

2011-11-08 07:27:12

真剣に、私はCSS3に解決策があると思いましたか？ –

CSS 3ソリューションがあります。 CSS 3のフレキシブルボックスレイアウトモジュールを使用することができます。IEではうまくサポートされていません。詳細については、こちらをご覧ください：http://caniuse.com/#search=flexible http://flexiejs.com/playground/には、ポジショニングをするうえで素晴らしいツールがあります。 – martineno

@martineno私はこれを答えとして、すなわちサポートは必要ないと仮定して提案します。 iOSのサファリによって完全にサポートされています。私は恥ずかしがり屋だと思っていませんでした。 –

段落要素を縦に整列しようとしています

答えて

関連する問題