css水平居中怎么设置-木庄网络博客

2022-03-19 05:03:12 PHP中文网 JavaScript 百度已收录

本文摘自PHP中文网，作者青灯夜游，侵删。

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>