美文网首页
CSS-盒子居中

CSS-盒子居中

作者: 测试探索 | 来源:发表于2022-06-08 22:18 被阅读0次
image.png

练习

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
    <div id="div1">
       test测试
    </div>


</body>
</html>

index.css

div{
    width: 200px;
    height: 200px;
    overflow: hidden;
    margin-left: 20px;

}

#div1{
    background-color: yellow;
    margin-top: 20px;
    margin-bottom: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    /*文字水平居中*/
    text-align: center;
    /*文字垂直居中*/
    line-height: 200px;
    /*对象居中*/
    margin: 20px auto;
}


*{
    /*margin: 0px 0px 0px 0px;*/
    margin-top: 0px;
    margin-left: 0px;
    margin-bottom: 0px;
    margin-right: 0px;
}
image.png

相关文章

  • CSS-盒子居中

    练习 index.html index.css

  • CSS-居中

    CSS-居中 一. 水平居中 1. 行内元素水平居中 使用text-align属性,对行内元素定义居中 2. 块级...

  • CSS-居中

    CSS-居中 一. 水平居中 1. 行内元素水平居中 使用text-align属性,对行内元素定义居中 2. 块级...

  • 前端学习第三天- margin和浮动

    想让盒子(div)居中 1 让盒子中的内容居中--文本或者行内,行内块元素水平居中: 让盒子本身水平居中,而不是内...

  • CSS基础第五天

    1、定位的盒子居中显示 ★:margin:0 auto; 只能让标准流的盒子居中对齐。★定位的盒子居中:先左右走...

  • CSS-居中

    水平居中绝对定位+left+margin-left.first{ position: absolute; ...

  • CSS解决盒模型居中的问题

    CSS实现盒子模型水平居中、垂直居中、水平垂直居中的多种方法 CSS实现盒子模型水平居中的方法 全局样式 第一种:...

  • 前端 & 小测

    点亮星星 文本打点-单行 用户体验&实现 文字垂直居中 CSS-宽高定比例展示 【IE】CSS版本兼容&JS检测 ...

  • css_10 定位盒子居中

    ★:margin:0 auto; 只能让标准流的盒子居中对齐。 ★定位的盒子居中:先向右走父元素盒子的一半50%...

  • CSS-让盒子水平垂直居中(2019/1/31)

    垂直居中: 1、最简单的就是知道父盒子和子盒子的高度,计算子盒子和父盒子的高度差,然后除以二,在子盒子中使用mar...

网友评论

      本文标题:CSS-盒子居中

      本文链接:https://www.haomeiwen.com/subject/odboprtx.html