让同一行元素垂直方向对齐的几种方法

「爱情、让人受尽委屈。」 2023-10-15 21:43 7阅读 0赞

**方法1. Flex弹性布局：**

.container { // 父级容器
      display: flex;
      align-items: center; /* 垂直居中对齐 */
    }

这种方法的优点是简单快捷，缺点是不适合有动画的场景。因为flex的自动内容填充，会破坏动画效果需要的绝对定位。

**方法2. 绝对定位（不推荐）**：

.parent { // 父级容器
      position: relative;
      height: ${heisht}px; /* 父元素的高度 */
    }
    
    .child { //需要垂直对齐的子元素
      position: absolute;
      top: 50%; 
      transform: translateY(-50%); 
    }

**这个方法有个致命的缺点： 采用绝对定位以后，元素脱离了文档流，也就不会占据原有的位置，**

**所以，行内的每一个元素的定位参照点都是父级元素的左上角原点，这样带来的后果就是：**

**每一个元素都需要手动计算从父级元素最左边开始的margin-left, 否则元素就会都堆叠在最左边的位置，这样就很繁琐，而且也失去了float: left自动占位的优势。**

**方法3： 对子元素使用 transform: translateY(+xx%); (xx表示移动的比例)**

这种方法不会影响动画效果，也不需要绝对定位，唯一就是需要调整**translateY的偏移值。**

#nav .logo { 
      /* 注意： div必须设置宽高，否则背景色设置不会生效！ */
      width: 56px;
      height: 56px;
      background-color: #ff6700;
      border-radius: 5px; 
      transform: translateY(+40%);
      /* overflow: hidden是隐藏动画图标的关键  */
      overflow: hidden;
    }

**方法4： 对于全部是行内元素的情况，可以使用line-height= height，来使得文字垂直居中**

. element {
    /* 因为line-height会让内容自动撑开元素高度，
    当height和line-height相等时，文字就能垂直居中 */
     height: 100px;
     line-height: 100px;
       
    }

**因为line-height会让内容自动撑开元素高度，  
所以当height和line-height相等时，文字就能垂直居中**

**方法5. 对img标签使用vertical-align: middle使img图片和相邻文字垂直方向对齐**

// html结构：
    
       <a :href="#">
          <img :src="xxxx">
          <span>xxx文字内容</span>
       </a>
    
    // css代码：
    
       img{
           width: xxpx;
           height: xxpx;
           vertical-align: middle;       
          }