画像とテキストの水平方向の中央揃えを実現するCSS

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

1. Horizo​​ntal-align：中央で現在の画像とテキストを水平方向に揃えます。htmlがインライン要素かブロック要素かを区別する必要があります。例：タグimg、スパンはインライン要素、タグpはブロック要素、タグpを渡す必要がありますdiaplay：インラインブロック;インライン要素に変換;

1. img、p、およびdivの水平方向の中央揃えを実現するには、vertical-align：imgのcssの真ん中;およびpおよびdiv（表示：インラインブロック）をインライン要素に変換します。

2. imgとspanは両方ともインライン要素であるため、imgとspanの水平方向の中央揃えを実現します。imgcss：middleで垂直方向に揃えるだけでよく、spanタグに何も追加する必要はありません。

.funbtnitme { 
  margin-right：10px ; 
  font-size：13px ; 
} 
.funbtnitme img { 
  width：15px ; 
  高さ：15px ; 
  vertical-align：中央 ; 
}

第二に、フレックスレイアウトを通じて画像とテキストの水平方向の配置を実現する

親要素にcssを追加するだけです：

ディスプレイ：フレックス;

フレックス方向：行;

align-items：center;

子要素に垂直方向の配置を追加する必要はありません。

.funbtnitme { 
  margin-right：10px ; 
  font-size：13px ; 
  text-align：center ; 
  ディスプレイ：フレックス ; 
  フレックス方向：行 ; 
  align-items：center ; 
} 
.funbtnitme img { 
  width：15px ; 
  高さ：15px ; 
}