网站建设资讯

NEWS

网站建设资讯

css设置文字居中的方法

这篇文章主要介绍了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 水平居中了--文本文字

效果图:

css设置文字居中的方法

2、使用line-height属性来使文字垂直居中

line-height 属性设置行间的距离(行高)。不允许使用负值。

该属性会影响行框的布局。在应用到一个块级元素时,它定义了该元素中基线之间的最小距离而不是最大距离。



	
		
		css 垂直居中
		
	
	
		css 垂直居中了--文本文字

效果图:

css设置文字居中的方法

3、CSS3的flex布局 使文字垂直居中



    
        
        css 垂直居中
        
    
    
        css 垂直居中--文本文字(弹性布局)
    

效果:

css设置文字居中的方法

感谢你能够认真阅读完这篇文章,希望小编分享的“css设置文字居中的方法”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


新闻名称:css设置文字居中的方法
本文链接:http://njwzjz.com/article/jciiij.html

其他资讯