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

Question

在我的表单上，我在标签后面放了一个星号 (*) 以将其标记为重要。

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

这是它的外观：

注意 * 顶部对齐。

我试过这个，但它不起作用

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

Answer 1

使用vertical-align: sub 。

 .verified span{ vertical-align:sub; }

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

Answer 2

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

∗

演示：

这是默认的星号(*) 。 这是中间的星号(*) 。

Answer 3

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

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

Answer 4

before使用pseudo元素

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

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

Answer 5

如果您没有嵌套的子元素，请像这样添加一个：

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

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

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

例子

Answer 6

试试这个方法：

.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 */
}

请参阅此处的工作示例

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

Answer 7

使用relative而不是absolute来获得更好的对齐。

.required::before {
    position: relative;
    content: '*';
    left: 0;
    top: 0;
   }