CSS如何设置对齐方式？

html-css023

CSS如何设置对齐方式？,第1张

在CSS中，我们可以使用各种方法和技术来使对齐项目，例可以水平和垂直对齐项目。下面本篇文章就来给大家介绍一些使用CSS对齐项目的方法，希望对大家有所帮助。

1、margin : auto

此属性用于将块元素水平对齐到中心。

示例：

注意：使用margin : auto在IE8中不起作用，除非声明了!DOCTYPE。

效果图：

2、position: absolute

我们可以使用position: absolute来对齐项目。

示例：

效果图：

3、text-align: center

我们可以在各种标签中使用text-align: center；它可以将任何用HTML编写的文本对齐。

示例：

效果图：

4、line-height属性

想要垂直对齐项目，我们可以使用line-height属性。line-height 属性设置行间的距离（行高）。

示例：

效果图：

5、padding和text-align属性

我们可以使用padding属性和text-align : center的组合来垂直和水平对齐文本。

示例：

效果图：

本文参考地址： https://www.html.cn/qa/css3/10403.html

vertical-align是什么？

设置元素的垂直对齐方式。

注意点：

text-align是设置给需要对齐元素的父元素，

vertical-align是设置给需要对齐的那个元素本身，

vertical-align只对行内元素有效。

/*默认情况下图片和一行文字的基线对齐，

基线就是一行文字中最短那个文字的底部*/

vertrical-align:baseline

/*图片和父元素的顶部对齐*/

vertrical-align:top

/*图片和父元素的底部对齐*/

vertrical-align:bottom

/*图片和一行文字的顶部对齐*/

vertrical-align:text-top

/*图片和一行文字的底部对齐*/

vertrical-align:text-bottom