CSS無法在IE和Chrome中使用，但可以通過Chrome在CodePen中使用

Question

我們有CSS和html，它們在IE或Chrome中打開時不起作用。 文本未居中對齊。

但是，當通過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：

在此處輸入圖片說明

Answer 1

如果要對元素使用垂直對齊 ，則該顯示必須是表格單元。

檢查一下。 工作正常。

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 個解決方案

解決方案1
2 2014-04-12 05:53:57

CSS無法在IE和Chrome中使用，但可以通過Chrome在CodePen中使用

問題描述

1 個解決方案

解決方案1 2 2014-04-12 05:53:57

解決方案1
2 2014-04-12 05:53:57