国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

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">
        關(guān)閉
    </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>

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">關(guān)閉</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">關(guān)閉</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.

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.

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

//HTML 部分
<p class="close-btn">關(guān)閉</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">
    關(guān)閉
</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. .

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

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">
      關(guān)閉
    </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;
 }

*{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)

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.

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!

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