私は次の(簡略化された)HTML構造を持っています:
<table>
<tr>
<td>
<div class="PromptContainer">
<span class="Prompt">Prompt text</span>
</div>
<input type="text" name="..."/>
</td>
</tr>
</table>
およびCSS:
.PromptContainer{
width: 0;
height: 0;
position: relative;
margin: 0 auto;
}
.Prompt{
bottom: 0;
padding-left: 0;
white-space: nowrap;
position: absolute;
}
スパン要素を入力要素の中央に配置したい。エッジの配置ルールのため、.PromptContainerのサイズを変更できないことに注意してください(.Prompt要素は入力要素の任意のエッジに配置できます)。span要素内のテキストの長さは可変であり、入力要素の幅より長くなる場合があります。私の場合(そのような要素が多数ある)効果がないため、javascriptを使用してこのタスクを実行することはできません。
編集: 私が持っているものと私が達成したいものを視覚化した画像はここにあります:
編集2: この質問の目的を説明しましょう。私たちは、さらに古いテクノロジー(Windowsアプリケーションとして機能)で作成された巨大な古いアプリケーション用の新しいWebベースのランタイムを作成しています。このアプリケーションのソースコードから新しい環境(ASP.NET)へのコンバーターを作成しました。この古いアプリケーションのすべてのコントロールは絶対に配置されているため、同じ方法で実行します。コントロール(入力タグのテーブルなど)には、その位置とサイズ、およびそれに関連付けられたプロンプトテキストがあります。プロンプトテキストはコントロールに対して比較的配置されているため、翻訳中の絶対位置はわかりません。フォント設定、テキスト、コントロールからのオフセット、およびプロンプトがアタッチされているコントロールの端に依存することに注意してください。
プロンプトを正しい場所に配置するCSSルールを作成しようとしています。ほとんどすべての構成を解決しましたが、センタリングに大きな問題があります。
絶対位置のため、ゼロ以外のサイズで.PromptContainerを使用することはできません-.Prompt自体ではなく、コントロールの位置のみを知っています。より大きな.PromptCointainerは、コントロール全体を下に移動します。
さらに、コントロールの幅より長いプロンプトテキストは、コントロールのサイズを変更してはなりません。