Html 垂直对齐标签中的文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1554941/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vertical Align text in a Label
提问by Ian
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 bottomand middlebut it doesn't work.
我被要求垂直对齐表单中字段标签中的文本，但我不明白为什么它们不动。我试过使用vertical-align:top;和其他属性来放置内嵌样式bottom，middle但它不起作用。
Any ideas?
有任何想法吗？
<dd>
<label class="<?=$email_confirm_class;?>"
style="text-align:right; padding-right:3px">Confirm Email</label>
<input class="text" type="text"
style="border:none;" name="email_confirm"
id="email_confirm" size="18" value="<?=$_POST['email_confirm'];?>"
tabindex="4" />
*
</dd>
回答by DisgruntledGoat
Vertical alignment only works with inlineor inline-blockelements, and it's only relative to other inline[-block] elements. Because you float the label, it becomes a blockelement.
垂直对齐仅适用于inline或inline-block元素，并且仅与其他 inline[-block] 元素相关。因为你浮动标签，它变成了一个块元素。
The simplest solution in your case is to set the label to display: inline-blockand add vertical-align: middleto 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.)
在您的情况下，最简单的解决方案是将标签设置为display: inline-block并添加vertical-align: middle到标签和输入中。（您可能会发现文本的高度使得垂直对齐无论如何都不会产生任何区别。）
回答by German Khokhlov
You can use flexbox in 2018+:
您可以在 2018+ 中使用 flexbox：
.label-class {
display: flex;
align-items: center;
}
Browser support: https://caniuse.com/#search=flexbox
回答by Wabbitseason
Have you tried line-height? It won't solve your problems if there are multiple row labels, but it can be a quick solution.
你试过line-height吗？如果有多个行标签，它不会解决您的问题，但它可以是一个快速的解决方案。
回答by Guffa
The vertical-alignstyle is used in table cells, so that won't do anything for you here.
该vertical-align样式用于表格单元格中，因此在这里对您没有任何作用。
To align the labels to the input boxes, you can use line-height:
要将标签与输入框对齐，您可以使用line-height：
line-height: 25px;
回答by Pablo
I had a similar problem and solved it wrapping the labelinto a divand setting the following styles:
我有一个类似的问题，并解决了它包装label成 adiv并设置以下样式：
<div style="display: table; vertical-align: middle">
<label style="display: table-cell;" ... > ... </label>
</div>
回答by peirix
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.
它不会很好地扩展，但它有效。
回答by Mike Pateras
I came across this trying to add labels o some vertical radio boxes. I had to do this:
我在尝试为一些垂直收音机盒添加标签时遇到了这个问题。我不得不这样做：
<%: Html.RadioButton("RadioGroup1", "Yes") %><label style="display:inline-block;padding-top:2px;">Yes</label><br />
<%: Html.RadioButton("RadioGroup1", "No") %><label style="display:inline-block;padding-top:3px;">No</label><br />
<%: Html.RadioButton("RadioGroup1", "Maybe") %><label style="display:inline-block;padding-top:4px;">Maybe</label><br />
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.
这使它们能够正确显示，其中标签位于单选按钮的中心，尽管我必须增加每一行的顶部填充，如您所见。代码不漂亮，但结果是。
回答by Mike Pateras
label {
padding: 10px 0;
position: relative;
}Add some padding-top and padding-bottom instead of height.
添加一些 padding-top 和 padding-bottom 而不是高度。
回答by psiclone
Use css on your label.
在标签上使用 css。
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:
请注意， line-height 将调整线本身的高度，而 margin 将决定其他元素在标签外的距离，而 padding 将决定离标签外边缘的任何内部空间。边距和填充是这样工作的（顺时针：左上右下），所以 2px 5px 3px 5px 是：
2px Top 5px Right 3px Bottom 5px Left
2px 顶部 5px 右侧 3px 底部 5px 左侧
回答by Sivadass N
Adding disply:flexproperty to the label will get the job done!
将disply:flex属性添加到标签将完成工作！
