Question

当我们在IE或Chrome中打开时，我们有CSS和html不起作用。文字不是居中对齐的。

然而，它通过Chrome运行时起作用 - > CodePen，文字居中对齐。

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

我的本地计算机Chrome：

enter image description here

Answer 1

如果您想对元素使用 Vertical-align ，则该显示必须是table-cell。

检查一下。工作正常。

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%;
}

CSS无法在IE和Chrome中运行，但可以通过Chrome在CodePen中运行

1 个答案: