html - 需要 <p> 填充 <div> 父级的高度

Question

我的总体目标是使一些文本垂直居中。现在我有一个包含 p 的 div。 div 是:

.container{
 margin-left: auto;
 margin-right: auto;
 height: auto;
 min-height: 100px;
 border: 1px solid red;
 width: 60%;
 overflow: hidden;
 }

和p:

.welcome_title{
 float: left;
 width: 30%;
 height: 100%;
 min-height: 100%;
 font-size: 200%;
 vertical-align: middle;
 text-align: center;
 }

这样做的目的是使 p 的高度为屏幕的 100% 而不是其父级。有什么帮助吗？

Answer 1

vertical-align 属性将不起作用，除非您使用 display: table-cell

不知道为什么您的 welcome_title 向左浮动以及是否需要 float ，但在这里您会找到三个示例。我相信您会找到适合您需要的一款。

http://deeson-online.co.uk/labs/how-centre-align-text-or-content-vertically-css