0

We have CSS and html which does not work when we open in IE or Chrome. Text is not center aligned.

However, it works when run via Chrome-> CodePen, Text is center aligned.

<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>

My local machine Chrome:

enter image description here

variable
  • 8,262
  • 9
  • 95
  • 215

1 Answers1

2

IF you want to use Vertical-align for a element, that display must be table-cell.

Check this. Working fine.

div {
  float:left;
  margin-left:10px;
  word-wrap:break-word;
  overflow:hidden;
  width:150px; 
  height:150px;
  line-height: 150px;
  background:red;   
  color: #fff;
  display:table;
}

div p {
  display: table-cell;
  vertical-align: middle;
  line-height: normal;
  width: 100%;
  text-align: center;
  height:100%;
}
Jeyarathnem Jeyachanthuru
  • 1,151
  • 10
  • 21
  • hey, that works.! Thanks, but my the question here is different. Maybe you can answer the same here http://stackoverflow.com/questions/23012932/how-to-horizontally-and-vertically-center-align-the-text-in-the-div and I will mark it answered. – variable Apr 12 '14 at 05:56
  • If I use this code, and the p tag has data without spaces then the div width increases. How to prevent this? – variable Apr 12 '14 at 06:22
  • Just add this style to p tag **word-wrap: break-word;** .. Read this article on MDN https://developer.mozilla.org/en-US/docs/Web/CSS/word-wrap – Jeyarathnem Jeyachanthuru Apr 12 '14 at 06:32
  • Yes, besides this, I had to add to the p tag --> max-width:150px. – variable Apr 12 '14 at 06:34
  • Check the code by entering data into P tag like "testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest" It will auto inc width of div. Hence, solution is to set max-width:150px for the p tag. – variable Apr 12 '14 at 06:44