css水平居中怎么设置


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

css设置水平居中的方法:1、使用“text-align: center;”样式,可对块级元素(父元素)中的行内元素进行水平居中;2、使用“margin: 0 auto;”样式,可对块级元素(父元素)中具有固定宽度的块级元素进行水平居中。

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

方法1:使用text-align属性

直接给父元素设置 text-align: center;样式,可以将块级元素(父元素)中的行内元素进行水平居中

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<!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>

效果图:

1.png

说明:

该种方法仅对文字、图片、按钮等行内元素有效(display属性设置为inlineinline-block的)进行水平居中

(学习视频分享:css视频教程)

方法2:使用margin属性

阅读剩余部分

相关阅读 >>

css布局之布局模型

css ellipsis不起作用怎么办

css选择器学习之聊聊复合选择器(详细介绍)

如何自定义video播放器样式?

css自动换行怎么设置

css nav-up属性怎么用

css target-name属性怎么用

css如何设置字体平滑

jsp css不起作用怎么办

css text-align属性怎么用

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




打赏

取消

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

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

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

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

评论

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