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

发布时间：2020-12-14 18:30:39 所属栏目：资源来源：网络整理

导读：参见英文答案 How to center an element horizontally and vertically?13个我试图找到如何垂直居中文本,但我找不到满意的答案.我到目前为止找到的最佳答案是 this.这使它看起来像是允许我垂直居中文本,但如果我使用它并添加更多文本,它只会扩展到底部而不是

参见英文答案 > How to center an element horizontally and vertically?13个
我试图找到如何垂直居中文本,但我找不到满意的答案.我到目前为止找到的最佳答案是 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>

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

我的最终解决方案

注意：如果你有float：left在同一个div中,则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>

解决方法

您可以将容器设置为显示：table-cell并添加vertical-align：middle：

http://jsfiddle.net/ptriek/h5j7B/1

(但Internet Explorer 7及以下版本不会喜欢这个…)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!