发表新帖
发表新帖

Vertical Align text in a Label

前端 未结
关注
14 1637
攒了一身酷
攒了一身酷 2021-02-06 20:27

I have been asked to vertically align the text in the labels for the fields in a form but I don\'t understand why they are not moving. I have tried putting in-line styles using

相关标签:
14条回答
  • 不要未来只要你来
    2021-02-06 20:50

    I had a similar problem and solved it wrapping the label into a div and setting the following styles:

    <div style="display: table; vertical-align: middle">
  <label style="display: table-cell;" ... > ... </label>
</div>
    0 讨论(0)
  • 无人及你
    2021-02-06 20:51 

    label {
        padding: 10px 0;
        position: relative;
    }

    Add some padding-top and padding-bottom instead of height.

    0 讨论(0)
  • 北海茫月
    2021-02-06 20:53

    To do this you should alter the vertical-align property of the input.

    <dd><label class="<?=$email_confirm_class;?>" style="text-align:right; padding-right:3px">Confirm Email</label><input class="text" type="text" style="vertical-align: middle; border:none;" name="email_confirm" id="email_confirm" size="18" value="<?=$_POST['email_confirm'];?>" tabindex="4" /> *</dd>

    Here is a more complete version. It has been tested in IE 8 and it works. see the difference by removing the vertical-align: middle from the input:

    <html><head></head><body><dl><dt>test</dt><dd><label class="test" style="text-align:right; padding-right:3px">Confirm Email</label><input class="text" type="text" style="vertical-align: middle; font-size: 22px" name="email_confirm" id="email_confirm" size="28" value="test" tabindex="4" /> *</dd></dl></body></html>
    0 讨论(0)
  • 孤城傲影
    2021-02-06 20:54

    This is what I usually do to "vertical align" text inside labels:

    label {
   display: block;
   float: left;
   padding-top: 2px; /*This needs to be modified to fit */
}

    It won't scale very nicely, but it works.

    0 讨论(0)
  • [愿得一人]
    2021-02-06 20:55

    If your label is in table, padding may cause it to expand. To avoid this you may use margin:

    div label {
    display: block;
    text-align: left;
    margin-bottom: -0.2%;
}
    0 讨论(0)
  • 青春惊慌失措
    2021-02-06 20:56

    Vertical alignment only works with inline or inline-block elements, and it's only relative to other inline[-block] elements. Because you float the label, it becomes a block element.

    The simplest solution in your case is to set the label to display: inline-block and add vertical-align: middle to the labels and the inputs. (You might find that the height of the text is such that vertical align won't make any difference anyway.)

    0 讨论(0)
 看不清?
提交回复
热议问题