使用CSS定位和溢出

Question

这是我的jsfiddle：

http://jsfiddle.net/Xz3SH/

这就是我想要做的事情：

1. 在正确的元素上，我喜欢＆＃34;关闭＆＃34;文本垂直居中。
2. 在主要元素上，我希望lorem文本不会溢出到右边。

注意外部元素有意固定位置。以下是我尝试过的内容：

• 使p元素成为内联块或其他方式，没有任何区别。
• 使正确的元素成为表格单元格，但它仍然没有垂直居中。
• 在任何/所有元素上放置隐藏的溢出而没有运气。

这里有一些CSS来满足提交解析器：

#panel-notice > p#close {
  display: inline-block;
  vertical-align: middle;
}

#panel-notice > p#message {
  display: inline-block;
  overflow: hidden;
}

编辑：我应该注意，如果不清楚，lorem文本可以是任何高度，包括一行。

Answer 1

#panel-notice {display:table}

#panel-notice > p#close {display:table-cell; float:right;}

删除position:absolute，然后将#panel-notice > p#close放在p#message之后的html中：）

Answer 2

您使用position: absolute; div #close宽度，因此请使用top:50%使其居中。 在第二点，你应该指定与#message div的with来克服溢出问题

这是演示         demo