问答详情
源自:4-1 vertical-align线性类属性值

为什么bottom设置vertical-align不起作用呢

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
   .text {
    background-color: #343434;
   }
   span {
    vertical-align: middle;
    
   }
   img {
    vertical-align: middle;
   }
   button {
    vertical-align: baseline;
   }
  </style>
 </head>
 <body>
  <div class="text">
   <span>1234</span>
   <img src="./img/bs.jpg" >
   <button type="button"></button>
  </div>
  
 </body>
</html>

提问者:爱前端的小鑫 2020-04-13 17:42

个回答

  • Raychan
    2020-04-22 23:20:47
    已采纳

    如下图所示:

    http://img1.mukewang.com/5ea060be0001020642482178.jpg

  • Raychan
    2020-04-22 23:19:29

    测试了一下给button 设置 vertical-align 是有效的。(元素存在没有完全对齐的原因是字符X的位置比正常位置要偏低)