189 8069 5689

css怎样使文字垂直对齐-创新互联

小编给大家分享一下css怎样使文字垂直对齐,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!

创新互联专注于鸡冠企业网站建设,响应式网站,成都做商城网站。鸡冠网站建设公司,为鸡冠等地区提供建站服务。全流程定制开发,专业设计,全程项目跟踪,创新互联专业和态度为您提供的服务

css使文字垂直对齐的方法:1、设置行文字的实际高度height和所在行的高度line-height相等;2、通过设置上下的padding值相同使多行未知高度文字垂直居中;3、使用vertical-align使多行文本固定高度的居中即可。

一、单行文字垂直居中对齐

如果一个容器中只有一行文字,对它实现居中相对比较简单,我们只需要设置它的实际高度height和所在行的高度line-height相等即可。

示例:





 单行文字实现垂直居中 

div {
height: 100px;
line-height: 100px;
border: 1px solid #FF0099;
}



现在我们要使这段文字垂直居中显示!

效果图:

css怎样使文字垂直对齐

不过在Internet Explorer 6及以下版本中,这和方法不支持对图片设置垂直居中。

二、多行未知高度文字的垂直居中

如果一段内容,它的高度是可变的那么我们就可以使用上一节讲到的实现水平居中时使用到的最后一种方法,就是设定Padding,使上下的padding值相同即可。同样的,这也是一种“看起来”的垂直居中方式,它只不过是使文字把

完全填充的一种方式而已。可以使用类似下面的代码:

div {
padding:25px;
}

示例:





多行文字实现垂直居中 

div {
padding: 25px;
border: 1px solid #FF0099;
width: 300px;
}



现在我们要使这段文字垂直居中显示!
div {
padding:25px;
border:1px solid #FF0099;
}

效果图:

css怎样使文字垂直对齐

三、多行文本固定高度的居中

CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起作用,但是在CSS中还有一个display属性能够模拟

,所以我们可以使用这个属性来让
模拟
就可以使用vertical-align了。

注意,display:table和display:table-cell的使用方法,前者必须设置在父元素上,后者必须设置在子元素上,因此我们要为需要定位的文本再增加一个

元素:

div#wrap {
height:400px;
display:table;
}
div#content {
vertical-align:middle;
display:table-cell;
border:1px solid #FF0099;
width:760px;
}

示例:





多行文字实现垂直居中 

div#wrap {
height: 300px;
display: table;
}
div#content {
vertical-align: middle;
display: table-cell;
border: 1px solid #FF0099;
width: 300px;
}





现在我们要使这段文字垂直居中显示!现在我们要使这段文字垂直居中显示!现在我们要使这段文字垂直居中显示!现在我们要使这段文字垂直居中显示!

效果图:

css怎样使文字垂直对齐

看完了这篇文章,相信你对css怎样使文字垂直对齐有了一定的了解,想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


网站标题:css怎样使文字垂直对齐-创新互联
当前路径:http://cdxtjz.cn/article/jehid.html

联系我们

您好HELLO!
感谢您来到成都网站建设公司,若您有合作意向,请您为我们留言或使用以下方式联系我们, 我们将尽快给你回复,并为您提供真诚的设计服务,谢谢。
  • 电话:028- 86922220 18980695689
  • 商务合作邮箱:631063699@qq.com
  • 合作QQ: 532337155
  • 成都网站设计地址:成都市青羊区锣锅巷31号五金站写字楼6楼

小谭建站工作室

成都小谭网站建设公司拥有多年以上互联网从业经验的团队,始终保持务实的风格,以"帮助客户成功"为已任,专注于提供对客户有价值的服务。 我们已为众企业及上市公司提供专业的网站建设服务。我们不只是一家网站建设的网络公司;我们对营销、技术、管理都有自己独特见解,小谭建站采取“创意+综合+营销”一体化的方式为您提供更专业的服务!

小谭观点

相对传统的成都网站建设公司而言,小谭是互联网中的网站品牌策划,我们精于企业品牌与互联网相结合的整体战略服务。
我们始终认为,网站必须注入企业基因,真正使网站成为企业vi的一部分,让整个网站品牌策划体系变的深入而持久。