CSS如何设置对齐方式?

html-css010

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>

<!--声明当前页面的编码集:charset=gbk,gb2312(中文编码),tuf-8国际编码-->

<meta charset="UTF-8">

<meta name="Generator" content="EditPlus">

<meta name="Author" content="天宝讲师">

<meta name="Keywords" content="关键词,关键字">

<meta name="Description" content="java零基础学习">

<title>java爱好者_天宝老师</title>

<!--css,js-->

<style type="text/css">

*{margin:0padding:0}

.bg{ text-align:left}

</style>

</head>

<body>

<table width="1000" border="1" class="bg">

  <tr>

    <td>java爱好者_天宝老师<td>

    <td>学java找天宝老师</td>

    <td>java零基础学习教程</td>

  </tr>

</table>

</body>

</html>