Rumah > hujung hadapan web > tutorial css > 详解CSS常用操作对齐方法

详解CSS常用操作对齐方法

高洛峰
Lepaskan: 2017-03-26 11:19:10
asal
1246 orang telah melayarinya

这篇文章主要为大家详解CSS常用操作对齐方法,感兴趣的小伙伴们可以参考一下

一、使用margin属性进行水平对齐   

*{
    margin: 0px;
}
.div{
    width: 70%;
    height: 1000px;
    background-color: red;
    margin-left: auto;
    margin-right: auto;
}
Salin selepas log masuk

margin:值1 值2

值1代表上下 值2代表左右

*{
    margin: 0px;
}
.div{
    width: 70%;
    height: 1000px;
    background-color: red;
    margin: 100px auto;
}
Salin selepas log masuk

二、使用position属性进行左右对齐

*{
    margin: 0px;
}
.div{
    width: 70%;
    height: 1000px;
    background-color: red;
    position: absolute;
    right: 0px;
}
Salin selepas log masuk

三、使用float属性进行左右对齐

*{
    margin: 0px;
}
.div{
    width: 70%;
    height: 1000px;
    background-color: red;
    float: left;
}
Salin selepas log masuk

   

Atas ialah kandungan terperinci 详解CSS常用操作对齐方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
css
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan