将星号（*）与HTML表单中的标签垂直对齐

Question

在我的表格上，我在标签后面加了一个星号（*），表示它很重要。

问题是它默认垂直对齐为顶部位置。我希望有一些方法可以将它垂直对齐为中间。

它的外观如下：

注意*是顶部对齐的。

我尝试了这个，但它不起作用

.imp {
        display: inline-table;
        vertical-align: middle;
}

Answer 1

使用vertical-align：sub

<div>
   <p class="verified"><span>*</span> verified </p>
</div>

.verified span{
    vertical-align:sub;
}

working demo

Answer 2

试试这个：http://jsfiddle.net/yce0mbux/1/

<span style="line-height:30px;vertical-align:middle" >*</span><label>Some text</label>

Answer 3

使用pseudo元素before

.imp {
  display: block;
  line-height: 26px;
}
.imp:before {
  content: '*';
  display: inline-block;
  vertical-align: middle;
}

<div class="imp">Mandatory</div>

Answer 4

如果您没有嵌套的子元素，请添加如下：

<div>
    <span id="one">
        *
    </span>
     some text
</div>

您需要同时定义height和line-height才能达到您想要的效果。

#one{
    vertical-align: middle;
    display: inline-block;
    line-height: 20px;
    height: 15px;
}

Example

Answer 5

试试这个方法：

.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

注意：如上所示插入，可让您根据需要独立定位。

Answer 6

vertical-align: sub方法还会扩展容器高度。 由于您还为问题标记了html，因此可以将html实体用于本机中间星号。

∗

演示：

这是默认的星号（*）。 这是中间的星号（*）。

Answer 7

使用absolute代替.required::before { position: relative; content: '*'; left: 0; top: 0; } 来获得更好的对齐效果。

{{1}}