zoukankan      html  css  js  c++  java
  • 移动端:移动端页面布局

    移动端页面布局


    一、 水平居中

    1. 行内元素     text-align: center;
    2. 块级元素
    1 /* 可以采取绝对定位的方式实现 */
    2 .center {
    3          960px;
    4         position: absolute;
    5         left: 50%;(25%6         margin-left: -480px;
    7     }

    二、 自适应块级元素水平居中

    前面介绍的块级元素居中要求有固定宽度,对于自适应的块级元素就无能为力了
    1 /* 借助css3的变形属性Transform来完成 */
    2 .content {
    3         position: absolute;
    4         left: 50%;
    5         transform: translateX(-50%);
    6     }

    三、 行内元素垂直居中

    1. 单行文本的垂直居中
      • 元素的高度和行高相等时,文本呈现垂直居中
    2. 多行文本的垂直居中
      • 不固定高度的垂直居中    通过设置padding实现
      • 固定高度的垂直居中       使用display设置为table,配合样式vertical-align设置为middle来实现

    四、 块级元素的垂直居中

     1 /* 固定宽高的垂直居中 */
     2 .content {
     3          100px;
     4         height: 100px;
     5         position: absolute;
     6         left: 50%;
     7         top: 50%;
     8         margin-left: -50px;
     9         margin-top: -50px;
    10     }
    11 /* 不固定宽高的垂直居中 */
    12 .content {
    13        position: absolute;
    14         left: 50%;
    15         top: 50%;
    16         /* 左/上边缘向左/上移动自身宽/高度的一半 */
    17         transform: translate(-50%, -50%);
    18     }

    五、 基于Flex实现垂直居中

    1 /* 移动端开发中最佳的解决方案 */
    2 .content {
    3         /*转为flex弹性盒布局*/
    4         display: flex;
    5         /*主轴上的对齐方式为居中*/
    6         justify-content: center;
    7         /*交叉轴上对齐方式为居中*/
    8         align-items: center;
    9     }
  • 相关阅读:
    1. 首次运行 Git 的配置
    本地git连接github
    Cygwin(linux)中vim配置
    ibatis入门
    XML(可扩展性标记语言)学习汇总一
    第一只小啊小爬虫(纪念下)
    Android SQLite DB的封装
    关于做项目的一些感想
    Git 初学三(git对象与git重置)
    Git 初学二(暂存区)
  • 原文地址:https://www.cnblogs.com/guisenbin/p/10454409.html
Copyright © 2011-2022 走看看