Rumah > Artikel > hujung hadapan web > css水平居中怎么设置
css水平居中怎么设置
- 青灯夜游asal
- 2021-04-02 16:25:115809semak imbas
css设置水平居中的方法：1、使用“text-align: center;”样式，可对块级元素（父元素）中的行内元素进行水平居中；2、使用“margin: 0 auto;”样式，可对块级元素（父元素）中具有固定宽度的块级元素进行水平居中。
本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
方法1：使用text-align属性
直接给父元素设置 text-align: center;样式，可以将块级元素（父元素）中的行内元素进行水平居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#father {
width: 300px;
height: 100px;
background: palevioletred;
text-align: center;
}
</style>
<div id="father">
我是测试文本！
</div>
</html>效果图：
说明：
该种方法仅对文字、图片、按钮等行内元素有效（display属性设置为inline或inline-block的）进行水平居中
（学习视频分享：css视频教程）
方法2：使用margin属性
给需要居中的子元素设置margin: 0 auto; 样式，可以将块级元素（父元素）中具有固定宽度的块级元素进行水平居中。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#father {
width: 300px;
height: 100px;
background-color: palevioletred;
}
#son {
width: 100px;
height: 50px;
background-color: pink;
margin: 0 auto;
}
</style>
<div id="father">
<div id="son">我是块级元素</div>
</div>
</html>效果图：
说明：
该方法仅能水平居中，且对浮动元素定位无效。
更多编程相关知识，请访问：编程视频！！
Atas ialah kandungan terperinci css水平居中怎么设置. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
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
Artikel sebelumnya：css怎么改变鼠标样式Artikel seterusnya：css3中新增加的颜色模式有哪些