css把文字居中的方法

小编给大家分享一下css把文字居中的方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

创新互联主营承留网站建设的网络公司,主营网站建设方案,成都App制作,承留h5微信小程序搭建,承留网站营销推广欢迎承留等地区企业咨询

什么是css

css是一种用来表现HTML或XML等文件样式的计算机语言,主要是用来设计网页的样式,使网页更加美化。它也是一种定义样式结构如字体、颜色、位置等的语言,并且css样式可以直接存储于HTML网页或者单独的样式单文件中,而样式规则的优先级由css根据这个层次结构决定,从而实现级联效果,发展至今,css不仅能装饰网页,也可以配合各种脚本对于网页进行格式化。

文字居中的方法:1、使用“text-align:center;”语句设置水平居中;2、利用CSS3的flex布局设置垂直居中;3、使用“vertical-align:middle;display:table-cell;”语句设置垂直居中。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

css设置文字水平居中

在CSS中可以使用text-align属性来设置字体水平居中。该属性规定元素中的文本的水平对齐方式,通过使用center值设置文本居中。

text-align语法:

text-align : left | right | center | justify

text-align参数值与说明:

  • left : 左对齐

  • right : 右对齐

  • center : 居中

  • justify : 两端对齐(不推荐使用,通常大部分浏览器不使用)

我们对text-align常用的参数值为left、right、center

该属性有如下几个特点:

1)、text-align的center应用在一个容器上,它只针对容器里面的文字以及容器里面的display为inline或者inline-block的容器,如果里面的容器display为block,则里面的容器的内容不会居中。

2)、text-align具有向下传递性,会不断地向子元素传递。如果设置一个div,则其子div中的内容也会居中。

示例:



	
		
		css 水平居中
		
	
	
		css文本文字--水平居中

效果图:

css把文字居中的方法

css设置文字垂直居中

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



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

效果图:

css把文字居中的方法

2、vertical-align:middle +display:table-cell 使文字垂直居中



	
		
		css 垂直居中
		

	

	

		css 文本文字--水平居中

效果图:

css把文字居中的方法

说明:vertical-align:middle +display:table-cell能够使单行文字、多行文字都居中。但是因为 table-cell 是 inline 类型,所以会导致原来的块级元素每个 div 一行移动到了同一行。如果需要分列两行,需要在外面额外添加容器对位置进行控制。

以上是“css把文字居中的方法”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


当前名称:css把文字居中的方法
新闻来源:http://hbruida.cn/article/iiggpj.html

其他资讯