HTML および CSS での水平メニューのテキスト位置調整をマスターする

水平メニューを作成する場合、完璧なテキストの位置揃えを達成するのは複雑な作業になることがあります。プレーン テキストとは異なり、メニュー項目は事前に定義された幅によって制限されることが多いため、流動的なレイアウト内で均等に配置することが困難になります。

でも心配はいりません。この一見とらえどころのない目標は、賢いテクニックを使えばエレガントに達成できます。非表示のスペーサー要素を戦略的に挿入することで、行を強制的に改行し、残りのメニュー項目を最適に配置できます。

重要なのは justify-text プロパティにあり、使用可能な領域全体でテキストを均等に配置するようにブラウザーに指示します。空間。ただし、この配置では、最初と最後のメニュー項目の配置がずれていたり、間隔が最適ではなかったりして、特定の要件を満たせないことがよくあります。

この解決策には、行の末尾にspan要素を追加することが含まれます。幅を 100% に設定すると、残りのスペースが効果的に消費され、前のメニュー項目が均等に分散されるようになります。望ましい視覚効果を維持するには、高さを 0 に設定してこの要素を非表示にします。

本質的に、この無害なスパンはプレースホルダーとして機能し、メニューの幅全体に伸びて他のメニューを押し出します。

このシームレスなテクニックを組み込むことで、HTML と CSS で完全に揃えられた水平メニューを簡単に作成でき、テキストを完璧に揃えることができます。プレーンテキストから期待します。