テキスト整列を使用して画像を中央揃えする方法:中央揃え

要素は、インライン要素(の表示値ですinline-block)。text-align: center;CSSプロパティをそれを含む親要素に追加することで、簡単に中央に配置できます。

を使用しtext-align: center;て画像を中央に配置するには、などのブロックレベルの要素の内側に配置する必要がありますdiv。以来text-alignプロパティが唯一のあなたの場所、ブロックレベル要素に適用されるtext-align: center;水平方向の中央を達成するためのラッピングブロックレベル要素に

   Center an Image using text align center  .img-container { text-align: center; } 

注:親要素はブロック要素である必要があります。ブロック要素でない場合は、display: block;プロパティと一緒にCSSプロパティを追加する必要がありtext-alignます。

   Center an Image using text align center  .img-container { text-align: center; display: block; }      

デモ: Codepen

オブジェクトフィット

画像が中央に配置されたら、サイズを変更することをお勧めします。このobject-fitプロパティは、要素がその親ボックスの幅/高さにどのように応答するかを指定します。

このプロパティは、画像、ビデオ、またはその他のメディアに使用できます。また、object-positionプロパティとともに使用して、メディアの表示方法をより細かく制御することもできます。

基本的に、このobject-fitプロパティを使用して、インラインメディアをストレッチまたはスキッシュする方法を定義します。

構文

.element 

  • fillこれはデフォルト値です。アスペクト比に関係なく、親ボックスに一致するようにコンテンツのサイズを変更します。
  • contain:正しいアスペクト比を使用して、コンテンツのサイズを変更し、親ボックスを埋めます。
  • covercontainコンテンツと似ていますが、多くの場合、コンテンツをトリミングします。
  • none:画像を元のサイズで表示します。
  • scale-down:間の違いを比較noneし、contain最小の具体的なオブジェクトのサイズを見つけること。

ブラウザの互換性

object-fitあなたはこのアウト//caniuse.com/#search=object-fitを確認することができます互換性に関する最新情報については、最近のブラウザのほとんどでサポートされています。

ドキュメンテーション

  • text-align -MDN
  • オブジェクトフィット-MDN
  • -MDN