Html中对齐有几种方式？详解对齐中标签

一、居中

1. 居中对齐元素

将块元素水平居中对齐(像

然后元素将占用指定的宽度，剩下的空间将平分在两个边距之间：

这个div是居中的。

.center{

margin:auto;

width:50%;

border:3pxsolidgreen;

padding:10px;

}

注意：如果没有设置宽度属性，则居中对齐没有效果 (或者设置到100%).

2. 居中对齐文本

将元素内部的文本居中, 使用text-align: center;

这些文本是居中的。

.center{

text-align:center;

border:3pxsolidgreen;

}

3. 居中图片

居中图片, 使用 margin: auto; 并且设置为块级元素:

img{

display:block;

margin:auto;

width:40%;

}

二、左右

HTML代码：

如何正确定位元素与位置属性的一个例子:

在我年轻而脆弱的岁月里，父亲给了我一些我一直以来一直在思考的建议.

1. 左右对齐 - 使用 position

对齐元素的一种方法是使用 position: absolute;

在我年轻而脆弱的岁月里，父亲给了我一些我一直以来一直在思考的建议。

.right{

position:absolute;

right:0px;

width:300px;

border:3pxsolid#73AD21;

padding:10px;

}

注意：

绝对定位元素从正常流中移除，并且可以重叠元素。

当使用 position对齐元素时, 总是定义 margin 和 padding 为 元素. 这是为了避免不同浏览器的视觉差异。

还有IE8和早期版本有一些问题, 当使用 position. 如果容器元素有一个指定的宽度 (例如：

body{

margin:0;

padding:0;

}

.container{

position:relative;

width:100%;

}

.right{

position:absolute;

right:0px;

width:300px;

background-color:#b0e0e6;

}

2. 左右对齐 - 使用 float

对齐元素的另一种方法是使用 float 属性:

.right{

float:right;

width:300px;

border:3pxsolid#73AD21;

padding:10px;

}

提示：

当将元素使用浮动对齐时，总是为body元素定义边距和填充。这是为了避免不同浏览器的视觉差异。

body{

margin:0;

padding:0;

}

.right{

float:right;

width:300px;

background-color:#b0e0e6;

}

三、垂直居中，水平居中

HTML代码：

在这个实例中,

我们使用定位和transform属性实现元素的水平和垂直居中:

我水平垂直居中.

注意:transform属性不支持IE8和更早的版本.

1. 使用 padding

有许多方法来中心垂直CSS元素. 一个简单的解决方案是使用顶部和底部 padding:

.center{

padding:70px0;

border:3pxsolidgreen;

}

水平和垂直居中, 使用 padding 和 text-align: center:

垂直居中

.center{

padding:70px0;

border:3pxsolidgreen;

text-align:center;

}

2. 使用 line-height

另一个技巧是使用 line-height 属性值等于 height 属性值.

.center{

line-height:200px;

height:200px;

border:3pxsolidgreen;

text-align:center;

}

/*Ifthetexthasmultiplelines,addthefollowing:*/

.centerp{

line-height:1.5;

display:inline-block;

vertical-align:middle;

}

3. 使用 position & transform

如果padding和line-height不可选，第三种解决方案是使用定位和变换属性：

.center{

height:200px;

position:relative;

border:3pxsolidgreen;

}

.centerp{

margin:0;

position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%);

}

四、总结

本文基于Html基础，主要介绍了Html中对齐的方式，对于对齐中的标签做了详细的讲解，用丰富的案例 ，代码效果图的展示，帮助大家更好理解 。

最后，希望可以帮助大家更好的学习CSS3。