將星號 (*) 與 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;
   }