扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章主要介绍了css设置文字居中的方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
成都创新互联成立10余年来,这条路我们正越走越好,积累了技术与客户资源,形成了良好的口碑。为客户提供网站制作、成都网站设计、网站策划、网页设计、国际域名空间、网络营销、VI设计、网站改版、漏洞修补等服务。网站是否美观、功能强大、用户体验好、性价比高、打开快等等,这些对于网站建设都非常重要,成都创新互联通过对建站技术性的掌握、对创意设计的研究为客户提供一站式互联网解决方案,携手广大客户,共同发展进步。
方法:1、使用text-align属性设置文字水平居中,语法“text-align:center”;2、使用line-height属性设置文字垂直居中,语法“line-height:数值”;3、使用CSS3的flex布局设置文字垂直居中。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
1、使用text-align属性来使文字水平居中
text-align属性规定元素中的文本的水平对齐方式,通过使用center值设置文本居中。
text-align是一个基本的属性,它会影响一个元素中的文本行互相间的对齐方式。值left、right和center会导致元素中的文本分别左对齐、右对齐和居中,想要使文本居中,直接使用center即可。
该属性设置文本和img标签等一些内联对象(或与之类似的元素)的居中。
该属性有如下几个特点:
1)、text-align的center应用在一个容器上,它只针对容器里面的文字以及容器里面的display为inline或者inline-block的容器,如果里面的容器display为block,则里面的容器的内容不会居中。
2)、text-align具有向下传递性,会不断地向子元素传递。如果设置一个div,则其子div中的内容也会居中。
css 水平居中 css 水平居中了--文本文字
效果图:
2、使用line-height属性来使文字垂直居中
line-height 属性设置行间的距离(行高)。不允许使用负值。
该属性会影响行框的布局。在应用到一个块级元素时,它定义了该元素中基线之间的最小距离而不是最大距离。
css 垂直居中 css 垂直居中了--文本文字
效果图:
3、CSS3的flex布局 使文字垂直居中
css 垂直居中 css 垂直居中--文本文字(弹性布局)
效果:
感谢你能够认真阅读完这篇文章,希望小编分享的“css设置文字居中的方法”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流