Vertical Align text in a Label

Question

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 vertical-align top  and other attributes like bottom and middle but it doesn t work    Any ideas     lt dd gt      lt label class   lt    email confirm class   gt              style  text-align right  padding-right 3px  gt Confirm Email lt  label gt      lt input class  text  type  text             style  border none   name  email confirm             id  email confirm  size  18  value   lt     POST  email confirm     gt              tabindex  4    gt         lt  dd gt

User · Answer

Adding disply flex property to the label will get the job done

User · Answer

I came across this trying to add labels o some vertical radio boxes  I had to do this    lt    Html RadioButton  RadioGroup1    Yes     gt  lt label style  display inline-block padding-top 2px   gt Yes lt  label gt  lt br   gt   lt    Html RadioButton  RadioGroup1    No     gt  lt label style  display inline-block padding-top 3px   gt No lt  label gt  lt br   gt   lt    Html RadioButton  RadioGroup1    Maybe     gt  lt label style  display inline-block padding-top 4px   gt Maybe lt  label gt  lt br   gt    This gets them to display properly  where the label is centered on the radio button  though I had to increment the top padding with each line  as you can see  The code isn t pretty  but the result is

User · Answer

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

User · Answer

To do this you should alter the vertical-align property of the input    lt dd gt  lt label class   lt    email confirm class   gt   style  text-align right  padding-right 3px  gt Confirm Email lt  label gt  lt input class  text  type  text  style  vertical-align  middle  border none   name  email confirm  id  email confirm  size  18  value   lt     POST  email confirm     gt   tabindex  4    gt    lt  dd gt    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    lt html gt  lt head gt  lt  head gt  lt body gt  lt dl gt  lt dt gt test lt  dt gt  lt dd gt  lt label class  test  style  text-align right  padding-right 3px  gt Confirm Email lt  label gt  lt input class  text  type  text  style  vertical-align  middle  font-size  22px  name  email confirm  id  email confirm  size  28  value  test  tabindex  4    gt    lt  dd gt  lt  dl gt  lt  body gt  lt  html gt

User · Answer

You don t have to add any padding or edit the line-height   Instead  just make sure that when you have an HTML like this     lt label gt  lt input type  checkbox  name    gt  lt span gt Checkbox Text lt  span gt  lt  label gt    Just make sure that the input height and width are the same  and the the text has the same font size   Then  it will look perfectly fine and looks centered

User · Answer

Use css on your label   For example   label  line-height 1em  margin 2px 5px 3px 5px  padding 2px 5px 3px 5px     Notice that the line-height will adjust the height of the line itself  whereas margin will dictate how far out other elements will be outside the lable and padding will dictate any inner space from the outside edge of the label   The margin and padding work like this  clockwise   Top Right Bottom Left   so 2px 5px 3px 5px is   2px Top 5px Right 3px Bottom 5px Left

User · Answer

The vertical-align style is used in table cells  so that won t do anything for you here   To align the labels to the input boxes  you can use line-height   line-height  25px

User · Answer

x000D   x000D  label   x000D          padding  10px 0  x000D          position  relative  x000D        x000D   x000D   x000D    Add some padding-top and padding-bottom instead of height

User · Answer

None of these worked for me   I am using ASP Net MVC with Bootstrap  I used the following successfully    label-middle        padding-top 6px      lt label id  lblX  class  label-middle   gt  lt  label gt    This vertically aligned the label with the textbox next to it

User · Answer

I had a similar problem and solved it wrapping the label into a div and setting the following styles    lt div style  display  table  vertical-align  middle  gt     lt label style  display  table-cell        gt       lt  label gt   lt  div gt

User · Answer

Have you tried line-height  It won t solve your problems if there are multiple row labels  but it can be a quick solution

User · Answer

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

User · Answer

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

User · Answer

You can use flexbox in 2018     label-class       display  flex      align-items  center      Browser support  https   caniuse com  search flexbox

[html] Vertical Align text in a Label

Examples related to html

Examples related to css