资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

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中怎么实现文本垂直居中
URL地址：http://cdkjz.cn/article/psohos.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
乐山企业网站设计蓬溪网站建设响应式网站建设方案圣月阀门响应式报价一元广告成都网络推广网站维护报价四川内江电信机房成都定制网站

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图