2021年4月16日

工藤

【IE11】flexboxの要素にmin-heightを指定してalign-items: centerを指定しても上下寄せにならない【解決方法】

マークアップ

facebook
twitter

IE11でflexboxの要素にmin-heightを指定してalign-items: centerを指定しても上下寄せにならないという現象が発生します。

0.1 元のコード

1 解決方法
- 1.1 修正したコード

元のコード

HTML

<div class="flexBox">
   <p>テキストを上下中央寄せにしたい</p>
</div>

<p>テキストを上下中央寄せにしたい</p>

</div>

CSS

.flexBox {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  color: #FFF;
  background-color: #42B0B9;
  min-height: 150px;
}

.flexBox {

display: flex;

align-items: center;

justify-content: center;

padding: 15px;

color: #FFF;

background-color: #42B0B9;

min-height: 150px;

}

DEMO

これを参考に修正していきます。

解決方法

解決には高さ指定をIEのみ通常のheightで指定したりtable要素にしたり…等色々あります。
が、flex要素をさらにflex要素で囲むと解決します。

修正したコード

HTML

<div class="flexWrap">
    <div class="flexBox">
       <p>テキストを上下中央寄せにしたい</p>
    </div>
</div>

<p>テキストを上下中央寄せにしたい</p>

</div>

CSS

.flexWrap{
  display: flex;
}

.flexWrap{

display: flex;

}

flexWrapを追加して、そこにdisplay: flex;を指定しました。
これで解決します。

あまりIE以外で無駄にflexを付けたくない、という場合はIEハックを付けましょう。

@media all and (-ms-high-contrast: none) {
  .flexWrap{
    display: flex;
  }
}

@media all and (-ms-high-contrast: none) {

.flexWrap{

display: flex;

}

DEMO

はやくIEに悩まされないようになりたいですね…
それでは

執筆者：工藤 [ WEBデザイナー ]

WEBデザイナー。最近はWordPressを触るのが好きです。よろしくお願いします。

マークアップ

SharePoint クラシックUIの通知機能をPower Automateで再現する

SharePoint サイトをモダンUIへ移行すると、よく耳にするのが「クラシックUIにあった通知機能を使いたい」という声です。しかし、モダンUIにはクラシック時代のような「標準の通知機能」が用意されていません。そこで活躍するのが「Power Automate」です。クラシック通知の代わりとして、リストの変更を自動で検知し、メールで知らせる仕組みを簡単に構築できます。本記事では、クラシックUIの通知に近い形で、Power Automate を使ったメール通知フローを作成す […]

2026年2月12日

Webサイト制作

制作会社が考える、WordPressとオリジナルCMSの選定ポイント

弊社では「WordPress」を使った制作と、弊社のオリジナルCMSツール「ProG（プログ）」を使った制作の、いずれについても多くのご相談をいただいています。それぞれにメリットがある一方で、運用時に気を付けるべき点もあり、サイトの目的や運用方法によって向き・不向きがあります。この記事ではそれぞれの特徴を整理しながら、WordPressとオリジナルCMSを併用できるケースについてもご紹介します！目次1 WordPressを使用するメリット1.1 多機能で自由度が高い1. […]

2026年2月4日

WordPress

本当に使う機能だけを残した、シンプルなWordPressのSEOプラグインを作成しました

WordPressでSEO周りの設定が簡単にできる、SEOプラグイン。 SEO対策には便利ですが、設定項目が多すぎて「どこを触ればいいのか分からない」と感じることはないでしょうか？そこで今回、社内の案件用にシンプルなSEOプラグインを作成してみました。『最低限の設定のみでシンプルに』というのが今回のテーマです。今回の記事では「どんな考え方で設計したのか」といった、制作背景などを紹介していきます。 ※本記事ではコードの全公開やダウンロードは行いません追記：無事リリースで […]

2026年1月7日

株式会社8bit (エイトビット)

東京都目黒区でWebサイト制作、Webシステム開発などを行っております。
コーポレートサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

Web制作に関するご相談はお気軽にどうぞ

弊社に制作をご依頼いただく際の費用感をご確認いただける、
見積りシミュレーションをご用意いたしました。

Web制作、Webサービスに関する技術やノウハウを発信するコラムサイト

【IE11】flexboxの要素にmin-heightを指定してalign-items: centerを指定しても上下寄せにならない【解決方法】

元のコード

解決方法

修正したコード

関連記事