[英]Vertically align an asterisk (*) with a label in an HTML Form
On my form, I put an asterisk (*) behind a label to mark it as important.在我的表单上,我在标签后面放了一个星号 (*) 以将其标记为重要。
The problem is that it vertically aligned as top position by default.问题是它默认垂直对齐为顶部位置。 I am hoping that there's some way through which I can vertically align it as middle.
我希望有某种方式可以将它垂直对齐为中间。
This is how it looks:这是它的外观:
Notice the * to be top aligned.注意 * 顶部对齐。
I tried this, but it doesn't work我试过这个,但它不起作用
.imp {
display: inline-table;
vertical-align: middle;
}
Use vertical-align: sub
.使用
vertical-align: sub
。
.verified span{ vertical-align:sub; }
<p class="verified"><span>*</span> verified</p>
The vertical-align: sub
method also expands the container height. vertical-align: sub
方法也扩展了容器的高度。 Since you also tagged html
for the question, you can use the html entity for native middle asterisk.由于您还为问题标记了
html
,因此您可以将 html 实体用于本机中间星号。
∗
Demo:演示:
Here is the default asterisk (*) .这是默认的星号(*) 。 Here is the middle asterisk (∗) .
这是中间的星号(*) 。
试试这个: http : //jsfiddle.net/yce0mbux/1/
<span style="line-height:30px;vertical-align:middle" >*</span><label>Some text</label>
use pseudo
element before
before
使用pseudo
元素
.imp { display: block; line-height: 26px; } .imp:before { content: '*'; display: inline-block; vertical-align: middle; }
<div class="imp">Mandatory</div>
If you don't have a nested child element, add one like so:如果您没有嵌套的子元素,请像这样添加一个:
<div>
<span id="one">
*
</span>
some text
</div>
You need to define both height
and line-height
to achieve the effect that you want.您需要同时定义
height
和line-height
以达到您想要的效果。
#one{
vertical-align: middle;
display: inline-block;
line-height: 20px;
height: 15px;
}
Try this method:试试这个方法:
.your-label {
display: inline-table;
vertical-align: middle;
position: relative;
padding-left: 15px; /* Adjust as needed to make space for the asterisks */
/* You need a given dimension to prevent overlap */
}
.your-label:before {
position: absolute;
content: '*';
left: 0; /* Adjust as needed */
top: 3px; /* Adjust as needed */
}
See working example here请参阅此处的工作示例
Note: Inserting as shown above, gives you the independence to position as needed.注意:如上所示插入,让您可以根据需要独立定位。
Use relative
instead of absolute
to get a better alignment.使用
relative
而不是absolute
来获得更好的对齐。
.required::before {
position: relative;
content: '*';
left: 0;
top: 0;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.