css 文字自动换行并垂直居中div效果

时间：2022-06-25 22:30:39 编辑：袖梨来源：一聚教程网

提示：您可以先修改部分代码再运行

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>demo</title>
        <style type="text/<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>">
            .box {
                position: relative;
                
                
                border: 1px solid #FFF;
                background-color: #999;
                display: table;
            }
            
            .wrap{
                display: table-cell;
                vertical-align: middle;	
                *position:absolute;
                *top: 50%;
                *left: 0;
            }
            
            .content {
                *position: relative;
                *top: -50%;
                *left: 0;
            }          
            
        </style>
    </head>
    <body>

<div class="box">
            <div class="wrap">
                <p class="content">
                    我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行
                    固定宽度的文字自动换行并垂直剧中">固定宽度的文字自动换行并垂直剧中</a>
                </p>
            </div>
        </div>
        <div class="box">

<div class="wrap">
                <p class="content">
                    是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行
                </p>
            </div>
        </div>
    </body>
</html></td>
	  </tr>
	</table>

提示：您可以先修改部分代码再运行

推荐专题

最新下载

热门教程

css 文字自动换行并垂直居中div效果

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程