菜鸟前端一杦 2021-12-09 21:05 采纳率: 60%
浏览 13
已结题

组态图如何限制大小和位置

做的项目中用到了组态图，是一个json数据包，把他放到画布上的时候显示出组态图，但每次进入的时候组态图都是在画布的左上方，并且大小不是想要的，想让组态图在画布上居中对齐并且大小适中，该怎么做？

  • 写回答

1条回答 默认 最新

  • 前端阿彬 前端领域新星创作者 2021-12-09 21:17
    关注

    给这个元素设置宽高，然后让他水平垂直垂直都居中
    我给你写了三种居中方法，每一段注释是一种方法，可以解开注释尝试
    如有帮助，望采纳 ^.^ 谢谢啦

    img

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style>
    body{
        width: 400px;
        height: 400px;
        border: 1px solid;        
        position: relative;

        /* 第一种*/
        display: flex;
        justify-content: center;
        align-items: center; 
       /* 第一种结束*/
    }
    .logo{
        width: 100px;
        height: 100px;
        
        /* 第二种
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto; */
        
        /* 第三种
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%); */
        
    }
    </style>
    <body>
        <div class="main">
            <img class="logo" src="https://img0.baidu.com/it/u=2201225864,2449795080&fm=26&fmt=auto"/>
        </div>
    </body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

问题事件

  • 系统已结题 1月17日
  • 已采纳回答 1月9日
  • 创建了问题 12月9日

悬赏问题

  • ¥15 基于卷积神经网络的声纹识别
  • ¥15 Python中的request，如何使用ssr节点，通过代理requests网页。本人在泰国，需要用大陆ip才能玩网页游戏，合法合规。
  • ¥100 为什么这个恒流源电路不能恒流？
  • ¥15 有偿求跨组件数据流路径图
  • ¥15 写一个方法checkPerson，入参实体类Person，出参布尔值
  • ¥15 我想咨询一下路面纹理三维点云数据处理的一些问题，上传的坐标文件里是怎么对无序点进行编号的，以及xy坐标在处理的时候是进行整体模型分片处理的吗
  • ¥15 CSAPPattacklab
  • ¥15 一直显示正在等待HID—ISP
  • ¥15 Python turtle 画图
  • ¥15 stm32开发clion时遇到的编译问题