老师我想分成两个块级元素来做,诗的块级元素怎么设置垂直水平居中显示

来源:2-6 编程练习

siegelions

2020-04-18 14:44:35

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>背景</title>

    <style>

     /*此处写代码*/

     .one{background-image:url(http://climg.mukewang.com/58dc9d360001d65806500650.jpg);

         /*text-align:center;*/

         width:500px;

         height:500px;

         

         

     }

     .two{

         

        

    </style>

</head>

<body>

    <div class="one">

        <div class="two">

            《长歌行》

        <br>

        <br>青青园中葵,朝露待日晞。

        <br>阳春布德泽,万物生光辉。

        <br>常恐秋节至,焜黄华叶衰。

        <br>百川东到海,何时复西归。

        <br>少壮不努力,老大徒伤悲。

        <br>

        </div>

        

    </div>

</body>

</html>


写回答

2回答

好帮手慕码

2020-04-18

同学你好,要实现水平、垂直都居中的话,可以通过定位的方式:

http://img.mukewang.com/climg/5e9ac7ab097da12b02460244.jpg

主要起作用的是如下:

position: absolute;
     	top: 0;
     	bottom: 0;
     	left: 0;
     	right: 0;
     	margin: auto;

这个可以称为拔河效应:盒子设置left:0 ;想要让它显示在左边 ,设置了right:0,又想要让它显示在右边 。两边都在拉它 ,这个时候出现margin:auto; 我直接在中间好了。而top:0和bottom:0也是一样的,上下都在拉它,然后出现margin:auto,垂直方向上也居中显示了。后面会学到,课程地址:https://class.imooc.com/lesson/757#mid=18880 

祝学习愉快~

1

好帮手慕码

2020-04-18

同学你好,块级实现水平居中的话,参考如下方式:

http://img.mukewang.com/climg/5e9ab0a40991b62603070148.jpg

如果我的回答帮到了你,欢迎采纳,祝学习愉快~

0
hen
回复
hiegelions
h 用padding调整和上边框的距离,间上面的代码 padding-top: 200px
h020-04-20
共2条回复

0 学习 · 40143 问题

查看课程