行のテキストまたはデザイナーを倒す方法

みなさんこんにちは





各レイアウトデザイナーは、少なくとも一度はテキストを行内に配置するタスクを処理する必要がありました。

たとえば、次のように:



画像



背景がしっかりしていれば問題はありません。 しかし、背景がこの例のような画像である場合はどうでしょうか?

以下の決定を裁判所に提出することをお勧めします。 誰かが追加を提案したりコメントしたりするかもしれません、私はただです。



例: リンク



ソリューションの本質は次のとおりです。



-背景画像を含むラッパーを作成し、オーバーフローを隠します(行の余分な部分を非表示にします)

-内部にテキストブロックを中央に配置するタイトルのラッパーを挿入します(text-align:center)

-テキストが相対配置(位置:相対)および表示:インラインブロックにされるブロック

-テキストを含むブロック内に、たとえばタグなどの2行を挿入します

-ポジトンを作成する:各行に対して絶対的で、明らかに幅が広い(たとえば、親ブロックの1000%)および上:(X)px(行をテキストの中央に揃える)

-次に、右の行の場合は100%、左の場合は右に100%交互に行を配置します

-テキストから行へのインデントはパディングインデントを行います。



あなたの答えを待っています。



All Articles