CSSを使用して画像の位置を操作する

導入

私はかなり長い間 CSS と HTML を使ってきましたが、率直に言って、テキストと一緒にコンテナ内で画像を垂直方向の中央に配置するという問題に直面したことがなかったことに驚きました。画像の位置を単独で操作したり、テキストの位置を操作したりするのは非常に簡単です。両方を一緒に操作することも簡単です。私がやりたかったのは、画像とテキストの両方を同じコンテナに配置し、画像を左揃え、ヘッダーを中央揃えにすることでした。

挑戦

私が使用していたテキストは、HTML 要素

要素はインライン要素であり、同じライン上の他の要素と喜んでプレイできることを意味します。もちろん、CSS の float プロパティを使用することもできましたが、問題があります。要素に float を導入すると、その要素がドキュメント フローから削除されます。そしてその要素の動作を制御することが難しくなります。

オプション

前に述べたように、float: left と float: inline-start を使用してみましたが、必ずしも期待どおりに動作するとは限りません。ベスト プラクティスとして、私はできる限り最新の技術を使用するようにしています。そこで、最新の flex と CSS GridBox が登場しました。Flexbox は、親コンテナに割り当てられると、以下に示すように、すべてのコンテンツ テキストを左に揃えます。

多くの試行錯誤の結果、最終的には具体性を活かしてミニマリストになることに落ち着きました。また、サイトで使用する画像のスタイルを個別に設定できるオプションも欲しかったので、コアの img 要素にはスタイルを適用しませんでした。画像を操作するためにいくつかのクラスを作成し、それらを適用しました。この試行錯誤の最中に、別の問題が私を悩ませました。私が知っているすべてのテクニックを使用しても、画像を親コンテナーの中央に揃えることはできませんでした。 align-selfプロパティを調べて試してみました。それがついにうまくいきました。これをコアの img 要素に適用したくなかったし、このためのクラスを作成したくなかったので、Child Combinator を使用して、header 要素の子である特定の img 要素をターゲットにしました (header > img) 。これで画像の位置合わせの問題は解決しました。

次の問題は、ヘッダー テキストを中央に揃えることでした。 text-align、align-self、align-items、justify-self、justify-items を使って、私が知っているすべてのトリックを試しました。ただし、親ヘッダー要素が flex としてマークされていたため、後続のスタイルは適用されませんでした。最後に、margin: auto を使用してコンテンツを中央に配置する簡単なトリックを試してみました。これでうまくいきました。最終的な出力は次のようになります。

ヘッダー コンテナーの高さを変更した場合でも、画像とテキストは要素の中央に垂直に配置され、X 軸上の位置に留まります。

最終コード

HTML コード:

<header class="flexi">
  <img class="round-img small lazy" src="/static/imghwm/default1.png" data-src="img/Mukul-2019.jpg" alt="Mukul Dharwadkar" caption="Picture of Mukul Dharwadkar">
  <h1 class="center-align">
    Mukul Dharwadkar
  </h1>
</header>

CSS コード:

header {
    width: 900px;
    margin: auto;
    height: 120px;
    background-color: antiquewhite;
  }

/* The CSS rule below is highly specific for an img element that is a child of the header element.
Typically there will be only one img element inside the header and therefore this is safe to keep */

header > img {
  align-self: center;
}

.flexi {
  display: flex;
}

.round-img {
  border-radius: 50%;
}

.small {
  width: 100px;
}

.flexi {
  display: flex;
}

.center-align {
  margin: auto;
}

完全なコードは私の Github リポジトリにあります。ご自由にお使いください。

結論：

Web デザインで画像とテキストを完璧に配置するには、多くの場合、さまざまな CSS テクニックを試す必要があります。この場合、Flexbox は、スタイルを個別に調整できる柔軟性を維持しながら、コンテナ内のコンテンツを中央に配置するための最も効率的で最新のソリューションであることがわかりました。 Child Combinator のような対象を絞ったセレクターを使用し、Flexbox の配置プロパティを活用することで、問題をクリーンかつ効率的に解決することができました。この方法により、コードが合理化されるだけでなく、将来の調整の管理も容易になります。 CSS は難しい場合がありますが、適切なアプローチを使用すれば、洗練された本格的なレイアウトを作成できます。

以上がCSSを使用して画像の位置を操作するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。