IEでも左寄りの上下中央寄せをcssで実現したい。

Question

現在cssで以下のように設定をし、
main-navについて、テキストを左寄せの上下中央寄せにしたいと考えています。
IE以外では上下中央寄せができていますが、IEのみ実現できておりません。

margin auto はIEでは上下中央寄せができないと調べたところあったのですが、
画面を半分半分(50%50%)にした状態で、上下中央寄せできる方法はあるでしょうか。

また、できない場合、サイズを指定したらどうすれば実現できるでしょうか。

教えていただきたいです。お願い致します。

   .page-wrap { 
  display: -webkit-box;           /* OLD - iOS 6-, Safari 3.1-6 */ 
  display: -moz-box;              /* OLD - Firefox 19- (doesn't work very well) */ 
  display: -ms-flexbox;           /* TWEENER - IE 10 */ 
  display: -webkit-flex;          /* NEW - Chrome */ 
  display: flex;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */ 


 } 


.main-content { 
  -webkit-box-ordinal-group: 1;   /* OLD - iOS 6-, Safari 3.1-6 */ 
  -moz-box-ordinal-group: 1;      /* OLD - Firefox 19- */ 
  -ms-flex-order: 1;              /* TWEENER - IE 10 */ 
  -webkit-order: 1;               /* NEW - Chrome */ 
  order:1;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */ 
  
  width: 50%;                     /* No flex here, other cols take up remaining space */ 
  
  -moz-box-flex: 1;               /* Without this, Firefox 19- expands to widest paragraph, overrides width */ 




} 


.main-nav { 
  -webkit-box-ordinal-group: 2;   /* OLD - iOS 6-, Safari 3.1-6 */ 
  -moz-box-ordinal-group: 2;      /* OLD - Firefox 19- */ 
  -ms-flex-order: 2;              /* TWEENER - IE 10 */ 
  -webkit-order: 2;               /* NEW - Chrome */ 
  order:2;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */ 

  width: 50%;                     /* No flex here, other cols take up remaining space */ 
  
  text-align: left; 

  margin-top: auto; 
  margin-buttom: auto; 


} 

<div class="page-wrap">
  
  <section class="main-content">
    <h1>Main Content</h1>
    <p><strong>I'm first in the source order.</strong></p>
    <p>The key to victory is discipline, and that means a well made bed. You will practice until you can make your bed in your sleep. Fry, we have a crate to deliver. Hey, guess what you're accessories to.</p>
    <p>I'll get my kit! That's not soon enough! Oh, all right, I am. But if anything happens to me, tell them I died robbing some old man.</p>
  </section>
  
  <nav class="main-nav">
  
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Clients</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </nav>
  

</div>

Comments

[aKusano]

そのCSSを適用するHTMLも記載してください。

Answer 1

margin-buttom: auto; ここスペルミスしてます。margin-bottom: auto; ですね。
ここが原因かどうかはわかりませんが、とりあえずミスは修正しておきましょう。

margin auto はIEでは上下中央寄せができないと調べたところあったのですが、
画面を半分半分(50%50%)にした状態で、上下中央寄せできる方法はあるでしょうか。

今回のケースではflexboxを使っていますので、flexboxのプロパティであるalign-items:center;を使えば横並びになっている2つのボックスを上下中央に配置できますよ。

.page-wrap { 
  display: -webkit-box; 
  display: -webkit-flex; 
  display: -ms-flexbox; 
  display: flex;
  /*flexアイテムをクロス軸方向に中央揃え*/
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
 }

これで試してみてください。

Answer 2

これでどうでしょう。IEでのみ動いていないのなら大抵の場合ベンダープリフィックス付与で大丈夫です。

.page-wrap {
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6 */
  /* OLD - Firefox 19- (doesn't work very well) */
  display: -ms-flexbox;
  /* TWEENER - IE 10 */
  /* NEW - Chrome */
  display: flex;
  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

.main-content {
  -webkit-box-ordinal-group: 1;
  /* OLD - iOS 6-, Safari 3.1-6 */
  /* OLD - Firefox 19- */
  -ms-flex-order: 1;
  /* TWEENER - IE 10 */
  /* NEW - Chrome */
  order: 1;
  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  width: 50%;
  /* No flex here, other cols take up remaining space */
  -moz-box-flex: 1;
  /* Without this, Firefox 19- expands to widest paragraph, overrides width */
}

.main-nav {
  -webkit-box-ordinal-group: 2;
  /* OLD - iOS 6-, Safari 3.1-6 */
  /* OLD - Firefox 19- */
  -ms-flex-order: 2;
  /* TWEENER - IE 10 */
  /* NEW - Chrome */
  order: 2;
  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  width: 50%;
  /* No flex here, other cols take up remaining space */
  text-align: left;
  margin-top: auto;
  margin-bottom: auto;
}