我有一些简单的CSS，旨在在其父div的中间（垂直）显示一个段落元素。
我的问题：段落元素未垂直对齐，始终位于顶部。此解决方案仅适用于Safari（特别是iPad的Safari版本）。
您知道如何使我的段落元素垂直对齐中间吗？
<html>
<head>
<style type="text/css">
<!--
.ButtonBox {
cursor: pointer;
vertical-align: middle;
text-align: center;
background-color: blue;
height: 200px;
}
.buttonBoxContainer {
cursor: pointer;
}
-->
</style>
</head>
<body>
<div class="ButtonBox">
<p class="buttonBoxContainer">Press Me</p>
</div>
</body>
</html>
最佳答案
如果框始终具有静态高度，则可以使用line-height将段落元素居中，如here所示。
如果不是静态的，最好的解决方案（以我的经验）是使用javascript。
<html>
<head>
<style>
.ButtonBox {
cursor: pointer;
vertical-align: middle;
text-align: center;
background-color: blue;
height: 200px;
color: #fff;
}
.buttonBoxContainer {
cursor: pointer;
line-height: 200px;
}
</style>
</head>
<body>
<div class="ButtonBox">
<p class="buttonBoxContainer">Press Me</p>
</div>
</body>
</html>
关于html - 尝试垂直对齐段落元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8047124/