DIV's - два ряда со звездочкой в ​​центре в конце ряда

Question

Я построил форму, используя DIV. Я доволен этим, так как он работает так, как я хочу. Однако мне бы хотелось, чтобы звездочка была центрирована вертикально справа от двух строк текстового поля, а рядом со звездочкой был добавлен текст, указывающий, что одно или оба поля обязательны для заполнения.

Например:

------------------!
ROW 1
------------------- * Звездочка здесь
ROW 2
------------------!

Я думал, что следующий код будет работать, но, похоже, звездочка стоит ниже всего. Кто-нибудь может дать мне совет?

Мой Css:

div.wrapper { ширина: 960px; }

div.left_column { ширина: 304px; плыть налево; выравнивание текста: справа; вертикально-Align: средний; цвет фона: # f5f5f5; Маржа направо: 3px; Запас-топ: 2px; обивка-дно: 5px; высота: 3px; }

div.right_column { }

Мой код ниже:

< Мета: ResourceKey = "lblhousenumberResource1">

<div class="right_column"> 
<asp:TextBox ID="txthousenumber" runat="server" BorderColor="#E0E0E0"   
borderStyle="Solid" BorderWidth="1px" TabIndex="2"   
meta:resourcekey="txthousenumberResource1"></asp:TextBox>
</div> 

<div class="left_column"> 
<span>
<asp:Label ID="lblhousenumber" runat="server" AssociatedControlID="txthousenumber"   
 meta:resourcekey="lblhousenumberResource1"></asp:Label>
</span>
</div> 

<div class="right_column"> 
<asp:TextBox ID="txthousenumber" runat="server" BorderColor="#E0E0E0"   
borderStyle="Solid" BorderWidth="1px" TabIndex="2"   
meta:resourcekey="txthousenumberResource1"></asp:TextBox>
</div>  

*

Спасибо

Phil

Answer 1

Я думаю, что единственный способ действительно сделать это правильно - это сделать одну из трех вещей.

1) Обернуть все 3 элемента в div, разделить вправо и влево. Слева будет содержать два поля, справа будет звездочка. Это должно гарантировать, что все упорядочено правильно.

2) Установите значения высоты для всех 3 элементов, а затем используйте выравнивание по вертикали, чтобы центрировать звездочку по центру. Сейчас он не знает, что это действительно должен быть высокий див.

3) Используйте таблицу. Шутки в сторону. У них плохой рэп, но это именно та ситуация, в которой они весьма полезны и имеют смысл. Возможно, это не семантически правильная вещь, но вы смогли бы ее устранить за несколько минут.