2

より正確には、Bootstrap の .carousel-caption である div 内の h3 および p 要素を中央に配置しようとしています。.carousel-caption に高さと幅を固定しました。私は、次のように、h3 と p を、id 親 div の中心に垂直に合わせようとしています。

           –––––––––––––––––––––––––––––––––––––––––––––––
           |.carousel-caption                            |
           |                                             |
           |                                             |
           | ––––––––––––––––––––––––––––––––––––––––––  |
           | |h3                                      |  |
           | ––––––––––––––––––––––––––––––––––––––––––  |
           | ––––––––––––––––––––––––––––––––––––––––––  |
           | |p                                       |  |
           | |                                        |  |
           | ––––––––––––––––––––––––––––––––––––––––––  |
           |                                             |
           |                                             |
           |                                             | 
           –––––––––––––––––––––––––––––––––––––––––––––––

このフィドルhttp://jsfiddle.net/pYjnF/には、少なくとも Chrome で動作するコードがありますが、デスクトップ C28+ FF22+ S6 IE10 のブラウザ サポートと、iOS 6+ サファリ & Android 4.0+ Chrome のモバイル サポートを実現しようとしています。

助言がありますか？

4

1 に答える 1

8

このhttp://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/をチェックするためのヒントを得て、ソリューションが実際には恥ずかしいほど単純であることが判明しましたhttp://jsfiddle.net/pYjnF/1 / 

<div class="carousel-caption flex" style="display: flex; align-items: center;">
   <div> <!-- div which content is not aligned -->
      <h3>Headline lorem ipsum dolor</h3>
      <p>Story gnis dis dolor re niet, sed quia se perferciaes eossedit, susam, sam voluptas sandebi stiusam, cuptaturem sequis imi, is etur</p>
   </div>
</div>
于 2013-10-02T19:57:21.440 に答える