文本垂直居中的方法

最新推荐文章于 2024-05-08 15:03:49 发布

trace332

最新推荐文章于 2024-05-08 15:03:49 发布

阅读量1.9k

点赞数

分类专栏：结构与样式文章标签： css border table web div html

结构与样式专栏收录该内容

23 篇文章 0 订阅

订阅专栏

一、如果是单行文本，可以用行距来解决问题。

<mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">#MrJin { width:500px; height:200px; border:1px solid #03c; text-align:center; line-height:200px; }</style> </head> <body> <div id="MrJin"><a href="http://www.52css.com/" mce_href="http://www.52css.com/">CSS Web Design 我爱CSS - 52CSS.com</a></div>

二、如果是多行文本，父容器不固定高度。
　　我们可以用padding来解决问题。
　　设置容器的padding上下为相同的固定值，容器的高度随着内容的增加而增加。
　　以此来实现多行文本的垂直居中。

<mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">#MrJin { width:500px; padding:50px 0; border:1px solid #03c; text-align:center; }</style> </head> <body> <div id="MrJin"><p><a href="http://www.52css.com/" mce_href="http://www.52css.com/">CSS Web Design 我爱CSS - 52CSS.com</p><p>我爱CSS致力于Web标准在中国的应用及发展</a></p></div>

三、如果是多行文本，父容器固定高度。

　　这就需要用到定位，而且需要给HTML增加标签。我们不提倡这样做。
　　但目前这个方法可以更好的解决问题。
　　在容器的内部需要增设两个容器，来实现这样的效果。
　　MrJin、MrJin_a和MrJin_b的设置分别如下：

<mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">#MrJin { position:static; *position:relative; height:300px; width:500px; border:1px solid #03c; *display:block!important; display:table!important; } #MrJin_a { position:static; *position:absolute; display:table-cell; vertical-align:middle; *display:block; top:50%; width:100%; } #MrJin_b { position:relative; top:-50%; text-align:center; width:100%; }</style> </head> <body> <div id="MrJin"> <div id="MrJin_a"> <div id="MrJin_b"> <a href="http://www.52css.com/" mce_href="http://www.52css.com/"> CSS Web Design 我爱CSS - 52CSS.com </a> </div> </div> </div>

trace332

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
文本垂直居中的方法

一、如果是单行文本，可以用行距来解决问题。 #MrJin { width:500px; height:200px; border:1px
复制链接

扫一扫