前端 - css如何实现图标和文字的“绝对对齐”呢?

前端实现图标和文字对齐有什么解决方法?我的“绝对对齐”的意思是不管是安卓设备和ios设备看着都是对齐的,最好也能实现pc上的对齐。

demo:https://jsfiddle.net/nzfbzxw6/

虽然我通过设置

vertical-align: -3%;

实现的对齐(在chrome上看着好好的),如果我要在手机设备上安卓,就要是另一个数值。
ios可能又要设个数值(而且不同的苹果机型也不一样)。

对这种问题有什么更好的解决方法吗?

-------------------------- 一个调皮的分割线 ----------------------------------------

各位前辈的方法我都试了一下,发现在安卓手机上都不好使,图片居中是没有问题的,但是文字(尤其是小于12px下的)却无法居中,这可能是安卓手机bug吧...

(第一个box盒子,第二个display:inline-block,第三个background center)

提问者黄舟提问时间:2017-04-17 14:18我来回答
22回答
迷茫
回复迷茫赞同05个月前

img, .wenzi{display:inline-block;}
.wenzi{margin:0 0 -8px 0} 试试

    大家讲道理
    回复大家讲道理赞同05个月前

    文字和图标都设置display:inline-block;vertical-align:middle;这个方法大部分情况下都是可以对齐的。但是,如果是父元素定高的按钮,当图标和文字都设置了vertical-align: middle时,图标和文字可以对齐,而相对于父元素不会却垂直居中(偏下),这是由于空格和行高造成的,可设置父元素font-size:0或line-height:0。

      Peter Zhu
      回复Peter Zhu赞同05个月前

      有的时候非常恶心的偏移了1px,然后就手动margin:-1px之类的调整,还有我怎么感觉文字或者inline的元素,总会有一点点莫名其妙的padding存在

        小葫芦
        回复小葫芦赞同05个月前
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-box-pack: center;
          ringa_lee
          回复ringa_lee赞同05个月前

          使用一个p将图片与文字包裹起来,在p里对齐了就行

            迷茫
            回复迷茫赞同05个月前

            <p class="box">

            <i></i>
            <span>测试</span>
            <span>普通门票</span>

            </p>

            i,span{

            display:inline-block;
            vertical-align: middle;

            }

              伊谢尔伦
              回复伊谢尔伦赞同05个月前

              inline-block的元素对齐都比较麻烦。所以如果条件允许,我会选择用flex居中。

                刘奇
                回复刘奇赞同05个月前

                举个例子,四条属性,在文字中插入图标可以用这个办法

                  黄舟
                  回复黄舟赞同05个月前

                  一般都用背景和定位的方法。vertical-align不好控制,和字体也有关系。

                    迷茫
                    回复迷茫赞同05个月前

                    前边的回答已经说了,需要设置为inline-block,
                    具体的原理推荐张鑫旭的
                    CSS深入理解之vertical-align

                    http://www.imooc.com/learn/542

                      猪哥
                      回复猪哥赞同05个月前

                      只是针对你这个问题的话,可以去掉 <img src="http://s1.mi.com/m/images/20151028/top-x.png">,直接用字符串×或者&times;代替。

                        PHPzhong
                        回复PHPzhong赞同05个月前

                        元素和元素之间不要出现空格。需要实现距离用margin。

                          迷茫
                          回复迷茫赞同05个月前
                          .icon,
                          .text{
                              display:inline-block;
                              vertical-middle:middle;
                          }
                            ringa_lee
                            回复ringa_lee赞同05个月前

                            除了上面说的各种方法外,我觉得最方便的还是干脆用个 字符图标 代替那个图片嘛。方便的很!

                              伊谢尔伦
                              回复伊谢尔伦赞同05个月前

                              直接上flex布局,用多了你会发现传统的写法没有一个能比得上弹性盒子来得爽。

                                ringa_lee
                                回复ringa_lee赞同05个月前

                                *{padding:0;margin:0;}
                                .close-btn{display:table; background:red;color:#fff;height:45px;line-height:45px;width:120px;border-radius:5px;}
                                .close-btn >p{display: table-cell;vertical-align: middle;width: 40%; padding: 0 4px;}
                                .img-responsive{text-align: right; }
                                .img-responsive img{vertical-align: middle;width:18px;height:auto;}
                                .close-des{text-align: left}
                                以上是针对楼主的demo的css调整,布局方面:<p class="close-des">关闭</p>给关闭多加一个p标签,这样可以达到楼主想要的结果,不管外面怎变变,图片和文字都是对齐的。

                                ps:如果要做两个元素绝对对齐,可以优先考虑display:table;(父级) display: table-cell;(子级),这两个真可以算是最佳搭配,而且屡试不爽。vertical-align: middle;只在display:inline;(行内元素起作用)

                                  刘奇
                                  回复刘奇赞同05个月前

                                  规定好字号,及图片大小,用相对定位 或者 作为背景图片,下面是相对定位:

                                  
                                      <p class="close-btn">
                                      <img src="http://s1.mi.com/m/images/20151028/top-x.png">
                                      <span class="text-close">
                                        关闭
                                      </span>
                                      </p>
                                  
                                  * {
                                    padding:0;
                                    margin:0;
                                    font-size:14px;
                                  }
                                  .close-btn {
                                    background:red;
                                    color:#fff;
                                    height:45px;
                                    line-height:45px;
                                    width:120px;
                                    border-radius:5px;
                                    text-align:center;
                                   }
                                   img {
                                      height: 14px;
                                      position: relative;
                                      top: 2px;
                                      left: 0;
                                   }
                                  
                                    Ty80
                                    回复Ty80赞同05个月前

                                    https://jsfiddle.net/lincenyi...

                                      阿神
                                      回复阿神赞同05个月前

                                      说下我自己常用的两种办法(我也一直没什么太好的办法):
                                      第一种:

                                      //HTML 部分
                                      <p class="close-btn">关闭</p>
                                      
                                      //CSS 部分
                                      .close-btn {
                                          color:#fff;
                                          height:45px;
                                          line-height: 45px;
                                          width:120px;
                                          border-radius:5px;
                                          text-align:center;
                                          background: url('http://s1.mi.com/m/images/20151028/top-x.png') red no-repeat 20px center;
                                          background-size: 20px 20px;
                                      }

                                      这种方法是直接把图片设置为背景。。然后背景居中。。

                                      第二种:
                                      这种办法比较粗暴。。直接把图片绝对定位,然后居中

                                      // HTML 部分
                                      <p class="close-btn">
                                          <img src="http://s1.mi.com/m/images/20151028/top-x.png" width="20px">
                                          关闭
                                      </p>
                                      // CSS 部分
                                      .close-btn {
                                          position: relative;
                                          background:red;
                                          color:#fff;
                                          height:45px;
                                          line-height: 45px;
                                          width:120px;
                                          border-radius:5px;
                                          text-align:center;
                                      }
                                      img {
                                          position: absolute;
                                          top: 0;
                                          bottom: 0;
                                          left: 0;
                                          margin: auto 20px;
                                      }

                                      不知道有没有更好的办法了。。

                                        巴扎黑
                                        回复巴扎黑赞同05个月前

                                        实际上不管是line-height还是用position去定位,不管你display用的什么,不同机型的显示效果都会不一样。

                                        水平上的差距几乎没有,垂直方向上的效果会多种多样。

                                        遇到这种ui,我的做法是把图片写在::before里,用margin去定位,这样不管右侧的文案是否绝对的垂直居中,但至少图是相对文案去定位的,是和文案对齐的。

                                          大家讲道理
                                          回复大家讲道理赞同05个月前

                                          我一般使用的方法:
                                          (1)使用display:table,没有什么兼容性问题,个人觉得还是比较好用的。

                                          <p class="close-btn">
                                              <p class="img-responsive">
                                                  <img src="http://s1.mi.com/m/images/20151028/top-x.png">
                                              </p>
                                              <p class="close">关闭</p>
                                          </p>
                                              *{padding:0;margin:0;}
                                              .close-btn{background:red;color:#fff;height:45px;width:120px;border-radius:5px;text-align:center;display: table}
                                              .img-responsive , .close{display: table-cell;vertical-align: middle}

                                          随意改变close-btn的高度,也能够居中。

                                          (2)绝对定位

                                          <p class="close-btn">
                                              <p class="img-responsive">
                                                  <img src="http://s1.mi.com/m/images/20151028/top-x.png">
                                              </p>
                                              <p class="close">关闭</p>
                                          </p>
                                              *{padding:0;margin:0;}
                                              .close-btn{background:red;color:#fff;height:45px;width:120px;border-radius:5px;text-align:center;position: relative}
                                              .img-responsive , .close{position: absolute; top:50%; transform: translate(0, -50%);}
                                              .close { margin-left: 30px}

                                          也可以实现绝对的居中对齐。

                                            PHPzhong
                                            回复PHPzhong赞同05个月前

                                            移动端(安卓设备、ios设备)图标文字垂直居中对齐的最佳常用解决方案是采用弹性盒子布局,可以快捷有效实现子元素未知高度绝对垂直居中对齐。PC端考虑到兼容性的问题,一般不推荐使用弹性盒子,依旧只能采用传统方式(vertical-align: middle;或者position定位)实现图标文字对齐。

                                            <!--html-->
                                            <p class="close-btn">
                                                <i class="icon-close-hmc"></i>
                                                <p class="close-txt">
                                                    关闭
                                                </p>
                                            </p>
                                            //css
                                            <style type="text/css">
                                                        * {
                                                            padding: 0;
                                                            margin: 0;
                                                        }
                                                        
                                                        .close-btn {
                                                            display: -webkit-box;
                                                            display: box;
                                                            display: -webkit-flex;
                                                            display: flex;
                                                            -webkit-box-align: center;
                                                            box-align: center;
                                                            -webkit-align-items: center;
                                                            align-items: center;
                                                            background-color: #00BB9C;
                                                            width: 80px;
                                                            height: 40px;
                                                            margin: 30px auto;
                                                            -webkit-border-radius: 6px;
                                                            -moz-border-radius: 6px;
                                                            border-radius: 6px;
                                                        }
                                                        
                                                        .icon-close-hmc {
                                                            display: block;
                                                            background-position: center;
                                                            background-repeat: no-repeat;
                                                            background-size: contain;
                                                            background-image: url("http://s1.mi.com/m/images/20151028/top-x.png");
                                                            width: 16px;
                                                            height: 16px;
                                                            margin: 0 10px;
                                                        }
                                                        
                                                        .close-txt {
                                                            font-size: 16px;
                                                            color: #FFFFFF;
                                                        }
                                                    </style>