css實現圖片和文字水平居中對齊

      <div class="funbtnitem">
        <img src="../../assets/img/shenhe.png" alt="">
        <span>修改</span>
      </div>

一、通過vertical-align:middle實現現圖片與文字水平對齊，需要區分html是行內元素，還是塊狀元素；例如：標簽img、span是行內元素；標簽p是塊狀元素則需要將標簽p通過diaplay:inline-block;轉化為行內元素；

1、實現img、p及div水平居中對齊，則只需要在img的css中的vertical-align：middle；及將p和div（display：inline-block）轉化為行內元素；

2、實現img、span水平居中對齊，由於這兩者都是行內元素；則只需要在img的css中的vertical-align：middle；span標簽什么都不需要添加；

.funbtnitme { margin-right: 10px; font-size: 13px;
} .funbtnitme img { width: 15px; height: 15px; vertical-align:middle;
}

二、通過flex布局實現圖片與文字水平對齊

只需要在父級元素中css添加：

display:flex;

flex-direction:row;

align-items:center;

子級元素則不需要像上面那樣添加vertical-align：middle；

.funbtnitme { margin-right: 10px; font-size: 13px; text-align: center; display: flex; flex-direction: row; align-items: center;
} .funbtnitme img { width: 15px; height: 15px;
}