代码改变世界

css居中问题

  默默不语  阅读(198)  评论(0)  编辑  收藏  举报

1.水平居中-行内元素-父级为行内元素

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #father{
                width: 500px;
                height: 500px;
                background-color: #0000FF;
                /* 若该元素不为块级元素，则把这个元素当作块级元素处理 */
                display: block;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <span id="father">
            水平居中-行内元素-父级为行内元素
        </span>
    </body>
</html>
复制代码

实现效果：

 

 2.水平居中-行内元素-父级为块元素

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>居中实例</title>
        <style type="text/css">
            #father{
                width: 500px;
                height: 500px;
                background-color: #0000FF;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <!-- 行内元素 -->
        <!-- 且父元素为块级元素 -->
        <div id="father">
            <span id="son">
                水平居中-行内元素-父级为块元素
            </span>
        </div>
        
        
        
        
    </body>
</html>
复制代码

 

实现效果：

 

 

3.水平居中-块级元素-子元素为定宽

 

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #father{
                width: 500px;
                height: 500px;
                background-color: #0000FF;
            }
            #son{
                background-color: #FF0000;
                /* 间接的通过左右外边距自动挤出来一个居中的效果 */
                margin: 0 auto;
                width: 200px;
            }
        </style>
    </head>
    <body>
        <!--如果子元素为块级元素，想要有包裹效果，父级元素必须是块级元素  -->
        <div id="father">
            <div id="son">
                水平居中-块级元素-子元素为定宽
            </div>
        </div>
    </body>
</html>
复制代码

 

 

 

实现效果：

 

 

 

4.水平居中-块级元素-子元素为不定宽

 

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #father{
                width: 500px;
                height: 500px;
                background-color: #0000FF;
                text-align: center;
            }
            #son{
                background-color: #FF0000;
                /* 间接的通过左右外边距自动挤出来一个居中的效果 */
                display: inline;
            }
        </style>
    </head>
    <body>
        <div id="father">
            <div id="son">
                水平居中-块级元素-子元素为不定宽
            </div>
        </div>
    </body>
</html>
复制代码

 

 

 

实现效果：

 

 

5.垂直居中-行内元素-单行

 

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #father{
                width: 500px;
                height: 500px;
                background-color: #0000FF;
            }
            #son{
                background-color: #DC143C;
                /* 如果只有一行可以取巧，设置文本行高等于父容器的高度 */
                line-height: 500px;
            }
        </style>
    </head>
    <body>
        <div id="father">
            <span id="son">
                我是单行的行内元素
            </span>
        </div>
    </body>
</html>
复制代码

 

 

 

实现效果

 

 

 

6.垂直居中-行内元素-多行/垂直居中-块级元素

 

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #father{
                width: 500px;
                height: 500px;
                background-color: #0000FF;
                /* 把父元素当作table中的一个格子 */
                display: table-cell;
                /* 单行也可以使用这种方式 */
                vertical-align: middle;
            }
            #son{
                background-color: #DC143C;
            }
        </style>
    </head>
    <body>
        <div id="father">
            <span id="son">
                我是多行的行内元素
            </span>
        </div>
    </body>
</html>
复制代码

 

 

 

实现效果：

 

 

编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
历史上的今天：
2018-03-30 《软件需求十步走》读书笔记01
点击右上角即可分享
微信分享提示