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

2022年6月27日
-

一、通過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）轉化為行內元素；

二、通過flex布局實現圖片與文字水平對齊
只需要在父級元素中css添加：
display:flex;
flex-direction:row;
align-items:center;

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

總結：vertical-align:middle 與flex布局處理圖片與文字水平居中對齊的區別；前者只要針對標簽比較少的，及css的內用是寫在子級的；後者針對需要實現很多標簽水平居中對齊比較方便，及css主要寫在父級上；