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

Question

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

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

虽然我通过设置

vertical-align: -3%;

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

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

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

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

（第一个box盒子，第二个display：inline-block，第三个background center）

Answer 1

The best common solution for vertical center alignment of icon text on mobile terminals (Android devices, ios devices) is to use flexible box layout, which can quickly and effectively achieve absolute vertical center alignment of unknown heights for child elements. Considering compatibility issues on the PC side, it is generally not recommended to use flexible boxes. You can still only use traditional methods (vertical-align: middle; or position positioning) to achieve icon text alignment.

<!--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>

Answer 2

The method I usually use:
(1) Use display:table. There is no compatibility problem. I personally think it is easier to use.

<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}

Change the height of close-btn at will, and it can also be centered.

(2) Absolute positioning

<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}

Absolute center alignment can also be achieved.

Answer 3

In fact, no matter whether you use line-height or position to locate, no matter what you display use, the display effects of different models will be different.

There is almost no horizontal gap, and the vertical effects will be diverse.

When encountering this kind of UI, my approach is to write the picture in ::before and use margin to position it. In this way, no matter whether the copy on the right is absolutely vertically centered, at least the picture is positioned relative to the copy. , which is aligned with the copy.

Answer 4

Let me talk about two methods that I commonly use (I never have a good method):
First method:

//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;
}

This method is to directly set the image as the background. . Then the background is centered. .

Second type:
This method is more crude. . Directly position the image absolutely and then center it

// 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;
}

I don’t know if there is a better way. .

Answer 5

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

Answer 6

Set the font size and image size, use relative positioning or as a background image, the following is relative positioning:

    <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;
 }

Answer 7

*{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}
The above is the css adjustment for the poster's demo. In terms of layout: <p class="close-des">Close</p>Add an extra p tag to the close, so as to reach the poster. The desired result is that no matter how the outside changes, the pictures and text are aligned.

ps: If you want to absolutely align two elements, you can give priority to display: table; (parent) and display: table-cell; (child). These two are really the best combination, and they have been tried and true. vertical-align: middle; only works in display:inline; (inline elements work)

Answer 8

Use flex layout directly. If you use it more, you will find that none of the traditional writing methods is as good as the flex box.

Answer 9

In addition to the various methods mentioned above, I think the most convenient thing is to simply use a character icon instead of the picture. Very convenient!

Answer 10

.icon,
.text{
    display:inline-block;
    vertical-middle:middle;
}