We are experiencing issues with our CSS and HTML not displaying correctly in IE or Chrome. The text is not properly center aligned.
Oddly enough, it works fine when viewed through Chrome on CodePen. The text is center aligned there.
<html>
<head>
<style>
div {
float:left;margin-left:10px;word-wrap:break-word;overflow:hidden;
width:150px;
height:150px;
line-height: 150px;
background:red;
color: #fff;
}
div p {
display: inline-block;
vertical-align: middle;
line-height: normal;
width: 100%;
text-align: center;
}
</style>
</head>
<body>
<div>
<p>
hello is the the testhello is the the testhello is the the testhello
</p>
</div>
</body>
</html>
When I view this on my local machine using Chrome: