大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

CSS中如何实现文本垂直居中

这篇文章主要讲解了“CSS中如何实现文本垂直居中”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CSS中如何实现文本垂直居中”吧!

站在用户的角度思考问题,与客户深入沟通,找到深州网站设计与深州网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:成都做网站、网站设计、企业官网、英文网站、手机端网站、网站推广、域名与空间、虚拟主机、企业邮箱。业务覆盖深州地区。

CSS实现一行或多行文本垂直居中

在表格布局时代,不需要过多的考虑垂直居中的问题,在单元格中,默认就是垂直居中的,一行文字是垂直居中,三行文字同样也会垂直居中。进行CSS网页布局,这样的形式改变了。文字默认是居于容器顶部。

如下所示:

SourceCodetoRun

    div-css.net  #MrJin{  width:500px;  height:200px;  border:1pxsolid#03c;  text-align:center;  }     CSSWebDesign-div-css.net
  

[可先修改部分代码再运行查看效果]

在这样的情况下,如何实现文字垂直居中呢。分为三种情况:

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

在div-css.net以前的文章中,也有过这方面的介绍。
如何在父元素中垂直居中文本?
我们为它增加行距的定义,得到了单行文本垂直居中的效果。

SourceCodetoRun

    div-css.net  #MrJin{  width:500px;  height:200px;  border:1pxsolid#03c;  text-align:center;  line-height:200px;  }     CSSWebDesign-div-css.net
  

[可先修改部分代码再运行查看效果]

二、如果是多行文本,父容器不固定高度。

我们可以用padding来解决问题。

设置容器的padding上下为相同的固定值,容器的高度随着内容的增加而增加。
以此来实现多行文本的垂直居中。

SourceCodetoRun

    div-css.net  #MrJin{  width:500px;  padding:50px0;  border:1pxsolid#03c;  text-align:center;  }     

CSSWebDesign-div-css.net

  

致力于Web标准在中国的应用及发展

  

[可先修改部分代码再运行查看效果]

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

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

ExampleSourceCode

#MrJin{  position:static;  *position:relative;  height:300px;  width:500px;  border:1pxsolid#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%;  }

这样设置以后,不管容器内的文本是一行,还是多行,都将会实现垂直居中对齐。

SourceCodetoRun

    div-css.net  #MrJin{  position:static;  *position:relative;  height:300px;  width:500px;  border:1pxsolid#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%;  }        CSSWebDesign-div-css.net  
    

感谢各位的阅读,以上就是“CSS中如何实现文本垂直居中”的内容了,经过本文的学习后,相信大家对CSS中如何实现文本垂直居中这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!


文章名称:CSS中如何实现文本垂直居中
路径分享:http://dzwzjz.com/article/jpdcdd.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP