CSS如何设置对齐方式？

html-css020

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

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<style>

body,html { margin: 0 position: relative height: 100% }

.container { width: 480px background-color: yellow margin: 0 auto position: relative height: 100% }

.box { background-color: red width: 80px height: 20px position: absolute left: -80px top: 0 }

</style>

</head>

<body>

<div class="container">

<div class="box"></div>

</div>

</body>

</html>

<p></p>代表的是一个段落容器，这个容器的style:

text-align

决定了整个容器里元素的排版方式

而

vertical-align

属性是设置元素的

垂直对齐

方式。

说明

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

也就是说这两个属性的目标是不一样的，<p></p>以及其他父类容器假如定义了text-align属性，那这些容器内的子元素都按照这个排版方式来进行排版，而vertical-align只是影响设置了这个属性的元素。

其实CSS你要去看具体的属性有什么特性才能了解具体的内容

建议去

http://www.w3school.com.cn/

看看