jsp页面中单行、多行文字的垂直居中

最新推荐文章于 2021-02-01 07:11:22 发布

放空自己&&保持学习

最新推荐文章于 2021-02-01 07:11:22 发布

阅读量6.1k

点赞数

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
.container{ width:800px;  margin:0 auto; border:1px solid red;}
</style>
<body>

<div class="container" >
    <h3>1.单行文字居中</h3>
    <!--设置行高来实现-->
    <div style="border:1px dashed red; line-height:60px; margin:30px;">
    这是高度为30像素的单行文字
    </div>
    
    <h3>2.多行文字不定高度居中</h3>
    <!--运用padding来实现-->
    <div style="border:1px dashed red; padding:60px 0; margin:30px;">
            <div>多行文字不定高度居中</div>
            <div>多行文字不定高度居中</div>
            <div>多行文字不定高度居中</div>
    </div>
    
    <h3>3.多行文字定高度居中</h3>
    <div style="border:1px dashed red; margin:30px; height:80px;">
        <span style="vertical-align:middle;display:inline-block; ">中中中<br>中中中中中中中中中中中中中</span>
        <!--span只能用line-heigth才能设置高度(用来撑开外边的div)， 用font-size:0px;来隐藏文字(行高必须在不为空的情况下才起作用)-->
        <span style="line-height:80px; ; display:inline-block;">&nbsp;你看不到我哦(请设置font-size:0)</span>
    </div>

</div>
</body>
</html>

http://www.cnblogs.com/siqi/archive/2013/06/16/3138289.html

放空自己&&保持学习

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jsp页面中单行、多行文字的垂直居中

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">head>meta http-equiv="Content-Type" content="tex
复制链接

扫一扫