CSS---标签居中

最新推荐文章于 2021-09-05 20:11:29 发布

maidu_xbd

最新推荐文章于 2021-09-05 20:11:29 发布

阅读量1.2k

点赞数

分类专栏： CSS 文章标签：盒子居中

本文链接：https://blog.csdn.net/maidu_xbd/article/details/96194214

版权

CSS 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

标签居中：

水平居中	text-align:center	针对行级元素，行级块元素有效
水平居中	margin:0 auto	针对块级元素有效
垂直居中	line-height:10px; height:10px
	vertical-align: middle;	针对行级元素有效
	定位：父元素position:relative; 子元素position: absolute; left: 50%; top: 50%; margin-left: -子元素宽度的一半; margin-top: -子元素高度的一半;

标签元素划分：

标签元素划分	特点	标签
块级元素	独占一行，可以设置宽高	ul、li、form、h1-h6、hr、p、div、table
行级元素	不会独占一行，不可以设置宽高	a、big、br、em、label、span、strong
行级块元素	既可以跟其他元素共占一行，又可以设置宽高	input、select、textarea、button、img

块级元素与行级元素相互转换：

把行级元素转成块级元素===display:block

把块级元素转成行级元素===display:inline

转为行级块元素===dipslay:inline-block

示例1如下：

居中效果图

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <style type="text/css" media="screen">
    #one {

        width: 400px;
        height: 400px;
        background: rgba(0, 190, 0, 0.7);
        cursor: pointer;
        /*水平居中*/
        margin: 0 auto;
        text-align: center;
        /*垂直居中*/
        line-height: 400px;
    }

    span {

        color: #fff;
        font-weight: bolder;
        vertical-align: middle;
    }

    img {
        width: 100px;
        vertical-align: middle;
    }
    </style>
</head>

<body>
    <div id="one">
        <img src="flower.png" alt="">
        <span>flower</span>
    </div>

</html>

示例2如下：

居中效果图

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>标签居中</title>
    <style>
    #box {
        width: 400px;
        height: 300px;
        background-color: gold;
        margin: 50px;
        /*水平居中*/
        text-align: center;
        /*垂直居中*/
        line-height: 300px;

        position: relative;
    }

    .test1 {
        background-color: greenyellow;
        width: 200px;
        height: 40px;
        /*重写行高*/
        line-height: 40px;

        /*水平居中*/
        /*margin: 0 auto;*/
        text-align: center;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -100px;
        margin-top: -20px;
    }

    span {
        background-color: skyblue;
    }
    </style>
</head>

<body>
    <div id="box">
        <div class="test1">块级元素</div>
    </div>
</body>

</html>

maidu_xbd

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS---标签居中

标签居中：水平居中 text-align:center 针对行级元素，行级块元素有效 margin:0 auto 针对块级元素有效垂直居中 line-height:10px; height:10px vertic...
复制链接

扫一扫