css使用定位方式左右对齐元素

要让图片居中对齐,可以使用margin:auto;并将它放到块元素中:

Paris

实例

img {

display: block;

margin: auto;

width: 40%;

}

左右对齐-使用定位方式

我们可以使用position:absolute;属性来对齐元素:

实例

.right {

position: absolute;

right: 0px;

width: 300px;

border: 3px solid #73AD21;

padding: 10px;

}

注释：绝对定位元素会被从正常流中删除，并且能够交叠元素。

提示:当使用position来对齐元素时,通常<body>元素会设置margin和padding。这样可以避免在不同的浏览器中出现可见的差异。

当使用position属性时，IE8以及更早的版本存在一个问题。如果容器元素（在我们的案例中是<divclass="container">）设置了指定的宽度，并且省略了!DOCTYPE声明，那么IE8以及更早的版本会在右侧增加17px的外边距。这似乎是为滚动条预留的空间。当使用position属性时，请始终设置!DOCTYPE声明：

实例

body {

margin: 0;

padding: 0;

}

.container {

position: relative;

width: 100%;

}

.right {

position: absolute;

right: 0px;