如何用css垂直居中文本 [英] How do I center text vertically with css

查看:114
本文介绍了如何用css垂直居中文本的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我试图找到如何垂直居中文本,但我找不到一个满意的答案。我发现的最好的答案是。这使它看起来像垂直居中文本,但如果我使用这个,我添加更多的文本,它只是扩展到底部,而不是重新居中,像水平发生。

I've tried to find how to center text vertically, but I can't find a satisfactory answer. The best answer I found until now is this. This makes it look like it allows me to center text vertically, but if I use this and I add more text, it is only extended to the bottom and not being re-centered, like what happens horizontally.

注意,我正在寻找一个CSS解决方案,所以没有javascript请。
注意,我想要能够添加多行文本。

Note, I'm looking for a CSS only solution, so no javascript please. Note, I want to be able to add multiple lines of text.

<?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>

最后,我想有3个块,每个块都以中间的文本为中心。这些文本由客户端编辑,因此它们必须能够跨越多行。目前,文本从框的顶部开始,到底部,最后,我想让文本从一个点开始,使文本正文的中心位于框的中心。

In the end, I want to have 3 blocks, each of them centering the text in the middle. These texts are edited by clients so they have to be able to span over multiple lines. Currently the text starts at the top of the box and goes to the bottom, in the end, I want the text to start at a point so the centre of the body of the text is positioned at the center of the box.

我的最终解决方案,
注意:如果你有float:left在同一个div中,vertical-align不起作用。

My final solution, Note: vertical-align does not work if you have float:left in the same div.

<?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>


推荐答案

您可以将容器设置为 display:table-cell 并添加 vertical-align:middle

You could set your container to display:table-cell and add vertical-align:middle:

a href =http://jsfiddle.net/ptriek/h5j7B/1> http://jsfiddle.net/ptriek/h5j7B/1

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

(但IE7和以下不会喜欢这个...)

(But IE7 and below won't like this...)

这篇关于如何用css垂直居中文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆