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;。

阅读剩余部分

相关阅读 >>

hover在css中有什么用？

css目标选择器有哪些

css如何实现不显示元素

如何删除css

css如何画线

利用css实现一个简单的对号效果

css怎么改行内元素高度

关于css中display:flex与inline-flex属性的详细介绍

html中hr怎么设置粗细

css中如何使用@规则？用法介绍

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




标签：

打赏

取消

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

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

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

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

相关推荐

评论

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