• 移动端CSS设置文字始终居中显示


    需求

    移动端要求弹窗显示如图:

    先上代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        @media screen and (max-375px) {
          html {
            font-size: 44px
          }
        }
    
        @media screen and (min-375px) and (max-414px) {
          html {
            font-size: 50px
          }
        }
    
        @media screen and (min-414px) {
          html {
            font-size: 55px
          }
        }
        * {
          margin: 0;
          padding: 0;
        }
        html,body {
           100%;
          height: 100%;
          position: relative;
        }
    
        body {
          background-color: #ccc;
        }
    
        .m_container {
          position: absolute;
           100%;
          height: 100%;
          left: 0;
        }
    
        .m_content {
           80%;
          height: 5rem;
          border-radius: 10px;
          background-color: #fff;
          text-align: center;
          position: absolute;
          left: 10%;
          top: 50%;
          transform: translateY(-50%);
        }
    
        .m_content h4 {
          margin: 11% 0 4%;
          font-size: .34rem;
        }
    
        .m_zytz {
           46%;
          margin-top: 4%;
          margin-bottom: 1%;
        }
    
        .m_content .e_text {
          display: block;
          color: #000;
          height: 4rem;
          font-size: .28rem;
          line-height: .45rem;
          text-align: left;
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          white-space: nowrap;
        }
    
        .e_item {
           84%;
          margin-left: 8%;
          color: #878787;
          font-size: .24rem;
          display: flex;
          text-align: left;
        }
    
        .e_item_title {
          flex-wrap: nowrap;
          flex-shrink: 0;
        }
    
        .e_text8888 {
          display: inline-block;
          font-size: 0.5rem;
          margin-bottom: 1px;
          vertical-align: bottom;
        }
    
        .e_texty {
          font-size: 0.36rem;
        }
      </style>
    </head>
    <body>
      <div class="m_container">
        <div class="m_content">
          <h4>重要通知</h4>
          <div class="e_text">
            <div class="e_top_text">
              截止2020年12月31日24时,集齐所<br>有勋章的幸运儿将<span style="color: #ee2a29;font-weight: bold;">可获得【战斗基】</span>
            </div>
            <div style="color: #ee2a29;font-weight: bold;margin-bottom: 2%;">
              勋章,瓜分&nbsp;<span class="e_text8888">8888</span><span class="e_texty">元</span>&nbsp;现金大奖!
            </div>
            <div class="e_item">
              <span class="e_item_title">领奖时间:</span>
              <span class="e_item_text">2021年1月4日15时 - <br>2021年1月10日17时</span>
            </div>
            <div class="e_item">
              <span class="e_item_title">领奖路径:</span>
              <span class="e_item_text">活动首页【勋章墙】- <br>点击【战斗基】勋章</span>
            </div>
          </div>
        </div>
      </div>
    </body>
    </html>
    

    问题

    要求适应不同尺寸的移动端设备,在写的过程中就出现了以下问题:

    • 问题:文字换行的问题,导致左右两侧不能对齐。
      解决:使用了br换行,随之出现了下边这个问题。

    • 问题:使用br换行后,由于弹窗m_content设置了宽度,有的设备中的一行文字并没有占满弹窗,会导致文字显示偏左。
      解决:去掉m_content的宽度,并设置e_text如下css:

      position: absolute;
      left: 50%;
      transform: translateX(-50%);  //让文字居中显示
      white-space: nowrap; //设置文字不换行
      
    • 问题:文案中“8888”的数字和汉字底部不齐。
      解决:设置“8888” vertical-align: bottom;并且上下微调:margin-bottom: 1px;

    • 问题:“领奖时间”“领奖路径”两段文字使用了flex布局,某些设备“领奖时间”4个字出现了换行,我们希望实现“领奖时间”在任何设备都不换行,并且所占宽度刚好为这4个字的宽度。
      解决:给“领奖时间”设置了不换行,同时设置flex-shrink: 0;即希望该容器在任何时候都不被压缩,代码如下:

      .e_item_title {
        flex-wrap: nowrap;
        flex-shrink: 0;
      }
      

      上面代码中的flex-shrink: 0;也可以用 auto;或者flex-basis: auto;来替换,这也同样可以达到我们的目的。

      如果子容器的 flex-basis 设置为 auto(width 也可以),那么计算剩余空间的时候将会根据子容器内容的多少来预留空间

    补充:

    MDN中white-space
    MDN中flex-shrink

  • 相关阅读:
    JQ分页练习
    Dom1
    JQ轮播图
    Dom操作
    DYR
    jQ点击事件
    [z]vc boost安装
    [z] .net与java建立WebService再互相调用
    [z]
    git常用命令二
  • 原文地址:https://www.cnblogs.com/ZerlinM/p/13608611.html
Copyright © 2020-2023  润新知