css怎么设置水平对齐

PHP中文网 JavaScript 百度已收录

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

css设置水平对齐的方法：1、使用“text-align: center;”样式设置文本元素水平居中对齐；2、使用“margin: auto;”样式设置块状元素水平居中对齐。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

1、使用text-align: center;

text-align属性指定元素文本的水平对齐方式。

属性值：

  • left 把文本排列到左边。默认值：由浏览器决定。

  • right 把文本排列到右边。

  • center 把文本排列到中间。

  • justify 实现两端对齐文本效果。

示例：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <style>

            .center {

                text-align: center;

                border: 3px solid green;

            }

        </style>

    </head>

 

    <body>

 

        <h2>文本居中对齐</h2>

 

        <div class="center">

            <p>文本居中对齐。</p>

        </div>

 

    </body>

 

</html>

效果图：

1.png

【推荐教程：CSS视频教程 】

2、使用margin: auto;

margin简写属性在一个声明中设置所有外边距属性。

属性值：

  • auto 浏览器计算外边距。

  • length 规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。

  • % 规定基于父元素的宽度的百分比的外边距。

要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;。

阅读剩余部分

相关阅读 >>

html里文字居中代码怎么写？

js怎么修改css属性

css hover怎么设置

关于css中的id选择器与class选择器的介绍

css怎么实现不可点击功能样式

css如何设置图层在最上面

css怎么设置图片圆角

css文本行高怎么设置

css如何实现开关效果

css怎样设置按钮不能点击

更多相关阅读请进入《css》频道 >>




标签：

打赏

取消

感谢您的支持，我会继续努力的!

扫码支持
扫码打赏，您说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

分享从这里开始，精彩与您同在

相关推荐

评论

管理员已关闭评论功能...