zoukankan      html  css  js  c++  java
  • html页面不同分辨率下居中显示同样效果

    本篇文章对于一些刚步入web前端的小伙伴可能会有很大帮助

    刚步入前端的小伙伴经常会遇到这样一个问题:我们写好的页面,在不同分辨率下,显示就不如人意了。

    出现这种问题的主要原因就是页面在当前分辨率下,使用了定死的宽度或者统一浮动到了左侧,这样放在大的分辨率下,整个页面会出现整体向左的现象,解决这种问题有两种方案:

    1.使用包裹标签,内容的标签使用margin: 0 auto;

    css:
    .wrap{ 100%}
    .container{1070px;height:300px;background: #f2f2f2;margin: 0 auto;}
    html:
    <div class="wrap">
        <div class="container"></div>
    </div>

    需要注意的是:内容的宽度必须要有固定的值,然后相对于包裹的宽度(分辨率宽度)居中

    2.如果使用了定位的话:

    css:
    .wrap{ 100%;position: relative;}
    .container{1070px;height:300px;background: #f2f2f2;position: absolute;left:50%;margin-left: -514px}
    html:
    <div class="wrap">
        <div class="container"></div>
    </div>

    只需要left:50%,然后margin-left: -(width/2)就可以了

  • 相关阅读:
    mysql的四种隔离
    mysql-事物
    Mysql数据备份
    线程池
    springboot整合log4j2
    springboot项目部署
    数组去重
    倒叙输出算法
    使用LLDB和debugserver对ios程序进行调试
    Linux使用pyinstaller 编译py成可执行程序
  • 原文地址:https://www.cnblogs.com/zj1024/p/8831157.html
Copyright © 2011-2022 走看看