Question

我试图找到如何垂直居中，但我找不到满意的答案。我发现的最佳答案是this。这使它看起来像是允许我垂直居中文本，但如果我使用它并添加更多文本，它只会扩展到底部而不是重新居中，就像横向发生的那样。

注意，我正在寻找一个仅限CSS的解决方案，所以请不要使用JavaScript。请注意，我希望能够添加多行文字。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
   PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <style type="text/css">
            div#maindiv {
                width: 810px;
                height: 99px;
                background-color: black;
                margin: 0px;
                padding: 0px;
                color: white;
                font-family: Sans-serif;
                text-align: center;
                display: table;
            }
            div#maindiv span {
                font-size: 1.1em;
            }

            div#part1 {
                width: 270px;
                height: 99px;
                background-color: #6DCAF2;
                float: left;
                vertical-align: middle;
                position: relative;
            }

            div#horizon1 {
                background-color: green;
                height: 1px;
                left: 0;
                overflow: visible;
                position: absolute;
                text-align: center;
                top: 50%;
                visibility: visible;
                width: 100%;
            }

            div#content1 {
                background-color: green;
                height: 99px;
                width: 270px;
                position: absolute;
                top: -50px;
            }

        </style>
        <title>XHTML-Strict</title>
    </head>

    <div id="maindiv">
        <body>
            <div id="part1">
                <div id="horizon1">
                    <div id="content1">
                        <div id="bodytext1">
                            <span>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dolor augue, faucibus quis sagittis
                            <span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

最后，我希望有三个块，每个块都将文本置于中间。这些文本由客户编辑，因此它们必须能够跨越多行。目前文本从框的顶部开始并且到底部，最后，我希望文本从一个点开始，因此文本正文的中心位于框的中心。

我的最终解决方案，

注意：如果您在同一个div中有float:left，则vertical-align不起作用。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
   PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <style type="text/css">
            div#maindiv {
                width: 810px;
                height: 99px;
                background-color: black;
                margin: 0px;
                padding: 0px;
                color: white;
                font-family: Sans-serif;
            }
            div#maindiv span {
                font-size: 1.1em;
            }

            div.part {
                width: 262px;
                height: 99px;
                padding: 0px;
                margin: 0px;
                padding: 4px;
                border: 0px;
                color: white;
                text-align: center;
                display: table-cell;
                vertical-align: middle;
            }

            div.bgc1 {
                background-color: #6DCAF2;
            }

            div.bgc2 {
                background-color: #2A4B9A;
            }

            div.bgc3 {
                background-color: #FF8A00;
            }


        </style>
        <title>XHTML-Strict</title>
    </head>

    <div id="maindiv">
        <body>
            <div style="float: left;">
                <div class="part bgc1">
                    <span>
                        Vegeta! What does the scouter say about his power level?!
                    </span>
                </div>
            </div>
            <div style="float:left;">
                <div class="part bgc2">
                    <span>
                        It's over NINE THOUSAAAAAAAAAND!
                    </span>
                </div>
            </div>
            <div style="float:left;">
                <div class="part bgc3">
                    <span>
                        What NINE THOUSAND? There is no way that can be right!
                    </span>
                </div>
            </div>
        </div>
    </body>
</html>

Answer 1

嗯，有几种解决方案。

最简单的是

#centerme
{
    // Will center the text vertically, but looks bad with multiliners
    line-height: 20em;
}

对于多线程，您需要将a-box-in-a-box

定位

#parentbox
{
    // We need the "parent" to have some kind of height
    height: 20em;

    // The most important... position children "relative" to the parent
    position:relative;
}

.childbox
{
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -5em; // This pulls the child back "up" to the vertical center
}

这里的问题是必须知道（或至少猜到）多层衬里的“高度”，所以它实际上是垂直的。

您需要了解的内容

没有纯粹的CSS方式来了解元素的高度，这样就可以让我们以“自适应”的方式将其垂直居中！

这意味着当您更改文本时，您还必须更改CSS以确保它们仍然适合。

这可能很烦人，这就是大多数人使用JavaScript来解决这个“缺少功能”的CSS烦恼的地方和原因。最后，JavaScript使我们所有人都更容易（至少在这种情况下）。

如何使用CSS垂直居中文本？

4 个答案:

您需要了解的内容

更多