How to vertically center text inside a div in IE?

Question

I've seen this asked many times, none of the solutions are working for me. As you can see in the Fiddle this is working exactly how I want it to in Chrome, but in IE the text is stuck at the top of the box, instead of in the middle. If you run it in IE browser and Chrome side by side you'll see what I mean. I want it in the middle exactly, using margin:auto; works perfectly in chrome, but in IE it doesn't. I'm not sure of a fix that will move the paragraph down so it is aligned in the middle both vertically and horizontally.

<section class="info"> <p class="infofont">Size: Large<br><br> 100% Cotton<br><br> Excellent Condition! </p> </section>

CSS:

.info{ display:flex; width:325px; margin:auto; } .infofont{ font-weight:bold; text-align:center; margin:auto; }

https://jsfiddle.net/fmu8g38h/

Your fiddle is different, it has 500px height set on .info. Without that it won't work in any browser. See css-tricks.com/snippets/css/a-guide-to-flexbox for which properties needs to be set for vertical alignment. Some browsers might need old syntax. — René
– René, Commented Nov 23, 2017 at 7:53

Mehravish Temkar · Accepted Answer · 2017-11-23 05:54:08Z

2

try this instead:

.info{ display:flex; top:50%; left:50%; transform: translate(-50%, -50%); position:absolute; }

https://jsfiddle.net/k1cbjvj7/1/

edited Nov 23, 2017 at 5:54

answered Nov 23, 2017 at 5:46

Mehravish Temkar

4,3653 gold badges30 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sanjeev S · Accepted Answer · 2017-11-23 05:31:25Z

margin:auto is used to align the texts horizontally.

to align in center the top portion must be aligned seperately

Rahul · Accepted Answer · 2017-11-23 08:02:34Z

You forgot to write flex-direction: row / column; align-items: center; justify-content: center; for when display is flex and inside content will be vertically and horizontally center and you should remove margin: auto; from .infofont class.

Below is update your CSS code.

.info{ border: 1px solid black; align-items: center; display: flex; flex-direction: row; justify-content: center; width: 325px; margin:auto auto; height: 500px; } .infofont{ font-weight:bold; text-align:center; }

Check the snipped

.info{ border: 1px solid black; align-items: center;	display:flex; flex-direction: row; justify-content: center;	width:325px;	margin:auto auto; height:500px; } .infofont{ color: green; font-size: 16px;	font-weight:bold; line-height: 1.2; margin: 0;	text-align:center; } *, *:after, *:before{ box-sizing: inherit; } html{ box-sizing: border-box; }

<section class="info"> <p class="infofont">Size: Large<br><br> 100% Cotton<br><br> Excellent Condition! </p> </section>

Note: I test this code only IE11, Chrome and Safari.

Collectives™ on Stack Overflow

How to vertically center text inside a div in IE?

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related