css-多行文字固定高度垂直居中（ie6.7.8.9 chrome ff）

转载于 2014-08-13 17:21:58 发布 · 461 阅读

firefox ie chrome css 兼容专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用CSS的vertical-align属性实现文字与其后的p标签元素垂直居中的方法。通过设置特定的样式，使得文本能够精确地居中显示，这对于网页布局设计非常有用。

<!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">  

<head>  

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />  

    <title></title>  

</head>  

<style type="text/css">  

    *{padding: 0;margin: 0;}  

    .box{width: 400px;height: 400px;border: solid 5px red;}  

    .txt,.bug{display: inline-block;vertical-align: middle;*display:inline;zoom:1;}  

    .txt{}  

    .bug{height: 100%;width: 1px;}  

</style>  

<body>  

    <div class="box">  

        <p class="txt">你妹啊妹啊<br>你妹啊妹啊</p>  

        <p class="bug"></p>  

    </div>  

</body>  

</html>