where interesting happend !

图片文字在一个水平线上

jimmy

关于图片和文字在一个水平面线上的问题,相信大家都遇到。实现这样一个简单的效果,如图:

image

看似比较简单的问题,其实还是有点小小烦人的。我以前的做法是这样的:

  1. 图片文字都要设置浮动
  2. 对文字或图片设置margin-top属性 ,调节两者的水平关系。

html:

 <div class="aa">  
          <img src="https://avatar.tower.im/a80e1f8718c14849ba60203aef5a755e>  
          <span>今年不发年终奖通知</span>
</div>

css:

.aa{
    height:40px;
    margin-left:20px;
    margin-top:20px;
}
.aa img{
    float:left;
    height:100%;
    width:40px;  
}
.aa span{
    float:left;
    margin-left:20px;
    margin-top:12px;
    color:#868484;
}

这个方式有点复杂,但是兼容性比较好。最近了解到一个属性叫vertical-align, (它只对display:inline,或者是inline-block的元素有效果)中文意思就是垂直对齐吧,w3的解释是这样的:

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。

先看一个比较实用、方便的例子,实现这样的表单效果:
image
如果我们不使用vertical-align,或者不浮动,文字 会有一点点的靠上。如图中的第一个表单。
第二个表单水平效果比较好,要实现这样的效果,做法很简单,就是给input 添加了一个 vertical-align:2px ,将input的基线 提高2px。

再看看,如果我想把最一开始的例子,使用这个属性实现,怎么个写法:

.aa{
      height:40px;
      margin-left:20px;
  }
  .aa img{
      height:100%;
      width:40px;
  }
  .aa span{
      margin-left:20px;
      color:#868484;
      vertical-align: 12px;
  }

按我的理解就是,图片文字作为同行的元素。行有一个基线,要使它们看着对齐,那么就是在基线的位置一样。它主要的直有以下几个:

  1. 数值。将基线 提高(正数)或者降低(负数)一定的像素。
  2. baseline,默认值。 元素放置在父元素的基线上。
  3. top。 把元素的顶端与行中最高元素 的顶端对齐
  4. bottom。 把元素的顶端与行中最低的元素的顶端对齐
  5. middle。 把此元素放置在父元素的中部 。

具体的用法可以网上了解下,推荐一个文章,我也没怎么看懂。

Comments

Proudly published with Hexo