Question

我有一些简单的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>

Answer 1

如果您的框总是具有静态高度，则可以使用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>

试图垂直对齐段落元素

1 个答案: