图片文字水平居中

上次想照着moe.hao123.com自己写一个看看，折腾了一下午这个问题，结果刚写到logo就放弃了，原因就是这个，这次又画一下午去弄清楚这个。
大多数网站的Logo，图标和名称是在一起的。

    menu{
        display: block;
        border-bottom: 1px solid rgba(0,0,0,.1);
        height: 4rem;
        padding: 0;
        margin: 0;
    }
    .warp{
        max-width: 100%;
        height: 4rem;
    }

    .warp a{
        color: #7F7F7F;
        display: inline-block;
        height: 100%;
    }

    .logo{

    }

    .subtitle{
        font-size: 2.5rem;
    }
    .btn{
        margin: 0.688rem;
        font-size: 1rem;
        display: inline-block;
        padding: .5rem 1rem;
        border-radius:  .125rem;
        border: .1rem solid coral;
    }

    .login{
        float: right;
    }

<menu>
    <div class="warp">
        <a href="javascript:console.log('click');">
            <img class="logo" src="{{root}}assets/img/xxr.ico" alt="WebSite" width="60" height="60" />
            <span class="subtitle">WebSite</span>
        </a>

        <span class="btn login">登陆</span>
    </div>
</menu>

显示效果

b67b4b4e94_999x231.png

img上面有一点空隙，基本是与WebSite的baseline对齐的

cde4fc1477b4d00f.png

8c85afc040b28c25.png

我是如何知道是baseline对齐？当把Website隐藏的时候，我把font-size设为0

a155b093a75674cc.png

解决办法，我能想到的只有3种黑科技

第一种，相对定位

.logo{
      position: relative;
      top: -7px;
 }

4cf99cf8e51ef296.png

第二种，绝对定位

    .warp a{
        color: #7F7F7F;
        display: inline-block;
        height: 100%;
        margin-left: 50px;
        padding-left: 70px;
    }

    .logo{
        position: absolute;
        top: 3px;
        left: 50px;
    }

bd81de201c149128.png

margin-left的作用是撑开左边不需要点击的

c48a54f6dff96db4.png

第三种，使用float，把基线干掉。

    .warp a{
        color: #7F7F7F;
        display: inline-block;
        height: 4rem;
        overflow: hidden;
        zoom: 1;
    }

    .logo{
        display: block;
        margin-top: 3px;
        float: left;
    }

    .subtitle{
        font-size: 2.5rem;
        line-height: 4rem;
        height: 4rem;
    }

手机上的效果

1cf488d5ed35d041.PNG

后来我又写了一个demo，这尼玛到底是Bug还是什么鬼？为什么会出现这么诡异的行为，

最后发现是 foundation的问题

<div class="container">
    <div class="img"></div>
    <span class="t-title">some</span>
</div>

<style>
    .container{
        height: 60px;
        margin-top: 20px;
        background: rgba(0,0,0,.5);
        border: none;
    }
    .img{
        width: 60px;
        height: 60px;
        display: inline-block;
        background: red;
    }
    .t-title{
        display: inline-block; 
        font-size: 3.5rem;
    }
</style>

369ba7924b_1000x659.png

我把代码复制到其他地方用浏览器打开又没问题，那就说明是foundation库的问题。日了🐶~

b9d1e6ea0d_1000x659.png

最后做一个总结

这个就是为了解决以下问题
inline-box 与 inline-box之间因为有 inline所以有基线，全是这个基线在作怪。
改变其中一个的padding、margin，基线就变了，其他也会跟着移动。

<div class="container">
    <div class="img"></div>
    <div class="t-title">some</div>
</div>

<style>
    .container{
        height: 62px;
        margin-top: 20px;
        background: rgba(0,0,0,.5);
        border: none;
    }
    .img{
        width: 60px;
        height: 60px;
        /*padding-top: 20px;*/
        margin-top: 20px;
        display: inline-block;
        background: red;
    }
    .t-title{
        display: inline-block; 
        /*margin-top: 20px;*/
        font-size: 62px;
        height: 62px;
        line-height: 62px;
    }
</style>

fbc63941ad_1000x321.png

关于Line-Height的应用 这里也提供，2个 图片 文本的垂直居中的例子

<style>
    body{
        padding: 20px;

    }
</style>



<style>
    .box {
        background: rgba(0,0,0,0.3);
        line-height: 200px;
        text-align: center;
    }

    .box > img{
        vertical-align: middle;
    }
</style>


<div class="box">
    <img src="{{root}}assets/img/xxr.ico" alt="">
</div>


<style>
    .box-2{
        margin-top: 20px;
        line-height: 40px;
        text-align: center;
        background: rgba(0,0,0,0.3);
    }

    .box > .text{
        display: inline-block;
        line-height: normal;
        text-align: left;
        vertical-align: middle;
        max-width: 100%;
    }
</style>


<div class="box-2">
    <h1>雨霖铃</h1>
    <div class="text">
        寒蝉凄切，对长亭晚，骤雨初歇。都门帐饮无绪，留恋处，兰舟催发。执手相看泪眼，竟无语凝噎。念去去，千里烟波，暮霭沉沉楚天阔。
        多情自古伤离别，更那堪冷落清秋节！今宵酒醒何处？杨柳岸，晓风残月。此去经年，应是良辰好景虚设。便纵有千种风情，更与何人说？
    </div>
</div>

4dd6492610_999x681.png

一下午就没了。好忧伤。