Как выровнять метку и текстовое поле?

83

Мой код выглядит так:

             XXXXX
             XXXXX
Description: XXXXX

Я хочу:

             XXXXX
Description: XXXXX
             XXXXX

«Описание» иногда занимает несколько строк.

Код:

<p class="DataForm">
    <label>Blah blah blah Description:</label>
    <asp:TextBox ID="txtBlahblahblahDescription"
                 runat="server"
                 TextMode="MultiLine"
                 Rows="8"
                 Columns="50"></asp:TextBox><br/>
</p>

CSS:

.DataForm {
}
.DataForm label {
    display: inline-block;
    font-size: small;
    margin-left: 5px;
    width: 5%;
    min-width: 60px;
}
.DataForm input {
    margin-right: 9px;
    display: inline-block;
    width: 21%;
    min-width: 30px;
}

html css asp.net

— NibblyPig
источник

Вы хотите, чтобы метка с описанием была посередине?

— Питер Стюифзанд, 03

3

Вы используете таблицы или они встроены, вы перемещаете метку влево и т. Д.? Можете ли вы опубликовать свой HTML и CSS, чтобы мы знали, как выглядит ваш код? Трудно рекомендовать стили и макеты, которые могут не вписаться в ваш код.

— Энди Э

Да, метку описания нужно по возможности центрировать по вертикали. . . .

— Прикреплю

110

Вам нужно поместить их оба в какой-либо элемент контейнера, а затем применить к нему выравнивание.

Например:

.formfield * {
  vertical-align: middle;
}

<p class="formfield">
  <label for="textarea">Label for textarea</label>
  <textarea id="textarea" rows="5">Textarea</textarea>
</p>

Развернуть фрагмент

— BalusC
источник

Хм, я попытался поместить это как встроенный стиль в свой тег p, но это не сработало

— NibblyPig

1

Разве это не по наследству? Я все равно попробовал, но ничего не

— вышло

1

Мое плохое, он действительно работает с формой данных *, хотя способ его центрирования немного странный, он работает, так что спасибо

— NibblyPig

10

Лучшим решением было бы просто добавить vertical-align: middle;каждое из ваших правил выше, .DataForm labelи .DataForm textarea. Использование селектора * может иногда иметь побочные эффекты.

— DisgruntledGoat

2

Возможно, вы правы, но если кто- vertical-align: middleто хочет что-то, обычно лучше применять это ко всему блоку.

— BalusC 03

19

Просто оберните текстовое поле меткой и установите стиль текстового поля на

vertical-align: middle;

Вот волшебство для всех текстовых полей на странице :)

<style>
    label textarea{
        vertical-align: middle;
    }
</style>

<label>Blah blah blah Description: <textarea>dura bura</textarea></label>

— Rado
источник

2

Это сработало отлично. Выбранный ответ - нет. Благодаря!

— eaglei22

4

Установите heightметку так же, heightкак многострочное текстовое поле.

Добавьте cssClass .alignTop{vertical-align: middle;}для элемента управления меткой.

<p>
    <asp:Label ID="DescriptionLabel" runat="server" Text="Description: " Width="70px" Height="200px" CssClass="alignTop"></asp:Label>
    <asp:Textbox id="DescriptionTextbox" runat="server" Width="400px" Height="200px" TextMode="MultiLine"></asp:Textbox>
    <asp:RequiredFieldValidator id="DescriptionRequiredFieldValidator" runat="server" ForeColor="Red"
    ControlToValidate="DescriptionTextbox" ErrorMessage="Description is a required field.">    
</asp:RequiredFieldValidator>

— Чарли
источник

3

Используйте vertical-align:middleв своем CSS.

<table>
    <tr>
       <td style="vertical-align:middle">Description:</td>
       <td><textarea></textarea></td>
    </tr>
</table>

— Питер Стюифзанд
источник

Я ищу элегантное решение без таблиц, если это возможно.

— NibblyPig, 03

4

Вы должны написать подобное в своем вопросе.

— Питер Стюифзанд 03

11

Кто сейчас использует таблицы для форм?

— BalusC 03

6

Извините, подумал, что это очевидно :(

— NibblyPig

4

Таблицы отлично подходят для форм. Это является табличные данные, хотя только с одной строки данных (или столбец).

— DisgruntledGoat

3

Выровняйте поле текстовой области по метке, а не метку по текстовой области,

label {
    width: 180px;
    display: inline-block;
}

textarea{
    vertical-align: middle;
}

<label for="myfield">Label text</label><textarea id="myfield" rows="5" cols="30"></textarea>

— зефрам
источник

1

Попробуй это:

textarea { vertical-align: top; }

— вайбхав джайн
источник

0

Попробуйте установить высоту элементов td.

vertical-align: middle;

означает, что элемент, к которому применяется стиль, будет выровнен внутри родительского элемента. Высота td может быть равна высоте текста внутри.

— h4xnoodle
источник