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

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

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>背景</title>

    <style>

     /*此处写代码*/

     .one{background-image:url(http://img1.sycdn.imooc.com/climg//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回答

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

http://img1.sycdn.imooc.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 

祝学习愉快~

好帮手慕码 2020-04-18 15:48:00

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

http://img1.sycdn.imooc.com//climg/5e9ab0a40991b62603070148.jpg

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

  • 提问者 siegelions #1
    老师,垂直居中再加什么代码?
    2020-04-18 16:01:07
  • Uen 回复 提问者 siegelions #2
    用padding调整和上边框的距离,间上面的代码 padding-top: 200px
    2020-04-20 21:02:10
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师