Html 如何在段落块中垂直居中文本？

我怎样才能从中得到：

为此：

?

是否有css属性来获得此结果？我知道垂直对齐，但这仅适用于内联元素，当它们与更高宽的元素一起使用时。

---

有什么想法吗？

您可以使用

边距/填充/行高

p #copyright {margin-top: 10px;}

或

或

这里有一篇文章可以帮助您更好地理解它：

如果内容是固定的（构成“版权”的实际词语永远不会改变），那么您应该使用Nave Tseva的解决方案

对于垂直对齐动态内容，您可以使用

display:table cell；垂直对齐：居中

以完成垂直居中。尽管如此，一个更具跨浏览器兼容性的解决方案是将该内容实际包装在单个表格单元格中，并设置

valign=“middle”

版权所有

---

我知道大多数人都不赞成使用表来处理像这样未经删除的单条目内容，因为在这种情况下，表并不是合适的元素。。。但是，在一个完美的世界里，我们也不会考虑IE的垃圾性。

如果你可以使用flex box布局，也就是说，你不需要对旧浏览器的支持，你可以使用下面的东西。CSS有点支持不同的浏览器，但它们正在融合

#content {
   display: -webkit-box;   /* OLD: Safari,  iOS, Android browser, older WebKit browsers.  */
   display: -moz-box;      /* OLD: Firefox (buggy) */ 
   display: -ms-flexbox;   /* MID: IE 10 */
   display: -webkit-flex;  /* NEW, Chrome 21+ */
   display: flex;          /* NEW: Opera 12.1, Firefox 22+ */

   -webkit-box-align: center; -moz-box-align: center; /* OLD… */
   -ms-flex-align: center; /* You know the drill now… */
   -webkit-align-items: center;
   align-items: center;

   -webkit-box-pack: center; -moz-box-pack: center; 
   -ms-flex-pack: center; 
   -webkit-justify-content: center;
   justify-content: center;

   margin: 0;
   height: 500px;
   border: 1px solid red;
}

#content p{
    border: 1px blue solid;
    box-flex:1
}

HTML

这是我能想到的所有东西。必须添加更多的过滤器，以确保它的作品多行了，耶啊

看到了吗

---

如果你真的需要在较旧的浏览器中使用它，我会放弃使用类似于

的表格，如果它只是一行文本，你可以使用

填充

或

行高

。出于某种原因，ppl讨厌我的“尝试垂直对齐：中间”答案，这有什么不好的地方吗？@heytools它有效吗？展示一个样品@heytools你看过我的帖子了吗？我否决了你的答案，因为首先你只回答我已经知道的问题，其次是无法工作+1这是一个老式的解决方案，如果你需要它为旧浏览器工作，对于一个无表解决方案，请参阅我的回答只有当内容不是动态的，你必须为内容伪造数字

p #copyright {line-height: 25px;}

<table cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td valign="middle">
      <p>Copyright</p>
    </td>
  </tr>
</table>

#content {
   display: -webkit-box;   /* OLD: Safari,  iOS, Android browser, older WebKit browsers.  */
   display: -moz-box;      /* OLD: Firefox (buggy) */ 
   display: -ms-flexbox;   /* MID: IE 10 */
   display: -webkit-flex;  /* NEW, Chrome 21+ */
   display: flex;          /* NEW: Opera 12.1, Firefox 22+ */

   -webkit-box-align: center; -moz-box-align: center; /* OLD… */
   -ms-flex-align: center; /* You know the drill now… */
   -webkit-align-items: center;
   align-items: center;

   -webkit-box-pack: center; -moz-box-pack: center; 
   -ms-flex-pack: center; 
   -webkit-justify-content: center;
   justify-content: center;

   margin: 0;
   height: 500px;
   border: 1px solid red;
}

#content p{
    border: 1px blue solid;
    box-flex:1
}

<div id="content">
    <p>Here's everything that I can think of to put into one line. Have to add more fillter to make sure it works for multiple lines too, yay-ah</p>
</div>