質問: ### 前提・実現したいこと Chrome、Firefoxでの表示はうまくいったのに、IE11で表示がおかしくなってしまいます。 ChromeとFirefoxでは、 「 ★○○○ 」 のように、センタリングしたh3の直前に画像が表示されていますが、 IEでは、 「★ ○○○ 」 と、文字だけがセンタリングされ、画像は左寄せになっています。 IEでも画像をh3の文字の直前に表示されるようにしたいのですが、どうすれば良いのでしょうか。 調べてはみたのですが、調べ方が悪いのか同じような例が見当たらずに悩んでいました。 IEで検証してみたところ、beforeの行すべてに線が引かれており効いていないようでした。 (でも画像は表示されているのに...?) ### 該当のCSS .center{ text-align: center; } .mark{ position: relative; margin-left: 40px; } .mark:before{ position: absolute; content: url("mark.png"); margin-left: -40px; } ### html ○○○
回答: 「kszk311」さんと同じ意見です。「vertical-align: middle;」を使った場合です。 ``` .center { text-align: center; } .mark::before { content: url(mark.png); /* ←「""」削除してOK */ vertical-align: middle; margin-right: ○○px; /* ← 任意の余白・単位 */ } ```