日期:2015/6/28来源: IT猫扑网
在表格布局时代,不需要过多的考虑垂直居中的问题,在单元格中,默认就是垂直居中的,一行文字是垂直居中,三行文字同样也会垂直居中。进行CSS网页布局,这样的形式改变了。文字默认是居于容器顶部。
如下所示:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="https://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>chinaz.com</title> <style type="text/css"> #MrJin { width:500px; height:200px; border:1px solid #03c; text-align:center; } </style> </head> <body> <div id="MrJin"><a href="https://www.chinaz.com/">CSS Web Design</a></div> </body> </html> |
在这样的情况下,如何实现文字垂直居中呢。分为三种情况:
一、如果是单行文本,可以用行距来解决问题。
我们为它增加行距的定义,得到单行文本垂直居中的效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="https://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>chinaz.com</title> <style type="text/css"> #MrJin { width:500px; height:200px; border:1px solid #03c; text-align:center; line-height:200px; } </style> </head> <body> <div id="MrJin"><a href="https://www.chinaz.com/">CSS Web Design </a></div> </body> </html> |
二、如果是多行文本,父容器不固定高度。
我们可以用padding来解决问题。
设置容器的padding上下为相同的固定值,容器的高度随着内容的增加而增加。
以此来实现多行文本的垂直居中。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="https://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>chinaz.com</title> <style type="text/css"> #MrJin { width:500px; padding:50px 0; border:1px solid #03c; text-align:center; } </style> </head> <body> <div id="MrJin"><p><a href="https://www.chinaz.com/">CSS Web Design </p><p>我们致力于为中文网站提供动力!</a></p></div> </body> </html> |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="https://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>chinaz.com</title> <style type="text/css"> #MrJin { width:500px; padding:50px 0; border:1px solid #03c; text-align:center; } </style> </head> <body> <div id="MrJin"><a href="https://www.chinaz.com/"> <p>CSS Web Design</p> <p>中国站长站</p> <p>我们致力于为中文网站提供动力!</p> </a></div> </body> </html> |
三、如果是多行文本,父容器固定高度。
这就需要用到定位,而且需要给HTML增加标签。我们不提倡这样做。
但目前这个方法可以更好的解决问题。
在容器的内部需要增设两个容器,来实现这样的效果。
MrJin、MrJin_a和MrJin_b的设置分别如下:
#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%; } |
这样设置以后,不管容器内的文本是一行,还是多行,都将会实现垂直居中对齐。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="https://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>chinaz.com</title> <style type="text/css"> #MrJin { position:static; 相关文章 相关下载 网友评论 |