Html CSS在IE和Chrome中不起作用，但通过Chrome在CodePen中起作用_Html_Css_Internet Explorer_Google Chrome

Html CSS在IE和Chrome中不起作用，但通过Chrome在CodePen中起作用

html css internet-explorer google-chrome

Html CSS在IE和Chrome中不起作用，但通过Chrome在CodePen中起作用,html,css,internet-explorer,google-chrome,Html,Css,Internet Explorer,Google Chrome,我们有CSS和html，当我们在IE或Chrome中打开时，它们不起作用。文本未居中对齐 <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; } di

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

<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->运行时，它可以工作，文本是居中对齐的

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


div{
浮动：左；左边距：10px；换行：中断字；溢出：隐藏；
宽度：150px；
高度：150像素；
线高：150px；
背景：红色；
颜色：#fff；
}
p组{
显示：内联块；
垂直对齐：中间对齐；
线高：正常；
宽度：100%；
文本对齐：居中；
}

hello是测试hello是测试hello是测试hello

我的本地机器：

如果要对元素使用垂直对齐，则该显示必须是表格单元格

看看这个。工作很好

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

在chrome for osx中，文本是居中对齐的（在codepen和本地），您测试的是哪个chrome版本？版本34.0.1847.116Hmmm与我使用的相同，您能发布屏幕截图吗？用图像更新，与IE 11.0.9600相同嘿，这很有效。！谢谢，但我的问题不同。也许你可以在这里回答相同的问题，我会把它标记为已回答。如果我使用这段代码，并且p标记的数据没有空格，那么div宽度就会增加。如何防止这种情况发生？只需将此样式添加到p tag word wrap:break word。。阅读这篇关于MDN的文章是的，除此之外，我还必须添加到p标记-->最大宽度：150px。我无法理解。