CSS中怎样修改代码将div1那块向下移到div的中间?

发布网友发布时间：2022-04-06 13:22

共3个回答

热心网友时间：2022-04-06 14:52

1 方法:

①设置div1的margin-top的值为 (div的height-div1的height)/2

②设置div1的display值为 inline-block;

2 代码

<html>
<head>
    <title></title>
    <style type="text/css">
        div {
            width: 700px;
            height: 100px;
            background-color: #93C;
        }

        #div1 {
            width: 700px;
            height: 40px;
            background-color: #06F;
            margin-top: 30px;
            display: inline-block;
        }
    </style>
</head>

<body>
    <div>
        <div id="div1">div1</div>
    </div>
</body>
</html>

3 显示效果如下

热心网友时间：2022-04-06 16:10

#div1
{
width:700px;
height:40px;
background-color:#06F;

margin-top：30px //加这一句就可以了

}

热心网友时间：2022-04-06 17:44

很简单啊把#div的样式改一下就好了（height:40px 改成 height:50px）

<html>

<head>

<title></title>

<style type="text/css">

div

{

width:700px;

       height:100px;

background-color:red;

}

#div1

{

  width:700px;

  height:40px;

background-color:#06F;



  }

</style>

</head>

<body>

<div>

<div id="div1"></div>

</div>

</body>

</html>

追问可是那块蓝的还是在红色块的上面

追答不好意思把你的意思理解错了在#div1{里面加 margin-top:30px} 就ok了！