CODEWITHSUNDEEP
htmlcsscentering
Chris
Chris

Reputation: 11

How to vertically center text inside a div in IE?

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/

Upvotes: 1

Views: 5340

Answers (3)

Rahul
Rahul

Reputation: 2071

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.

Upvotes: 1

Mehravish Temkar
Mehravish Temkar

Reputation: 4365

try this instead:

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

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

Upvotes: 2

Sanjeev S
Sanjeev S

Reputation: 1163

margin:auto is used to align the texts horizontally.

to align in center the top portion must be aligned seperately

Upvotes: 1

Related Questions