我需要垂直对齐标签中的图像

Question

我知道这篇文章已经完成了很多次，但由于一些奇怪的原因vertical-align:middle;似乎不起作用。

我想让<label></lable>元素中的所有内容垂直对齐

文字和<strong></strong>必须保持不变。

<strong></strong>文字字体大小必须小于<lable></lable>文字，并且与<lable></lable>文字垂直对齐。

图片必须float:right;并与<lable></lable>文字垂直对齐。

最后它看起来像下面的图像，但我想要一切都垂直自动对齐而不设置边距或填充，因为这可能会影响移动布局上的布局。

请不要错过任何帮助。

我使用var.style.display = 'inline-block';和var.src = '/img_1.png';更改图片，并使用var.style.borederColor = "#fff"更改边框颜色。

要显示错误或确定，我使用var.innerHTML = 'msg';更改<strong>的内部HTML。

所有display: inline-block;值都由Javascript从display:none;更改为display:inline-block;，以便在验证失败时在<label>内显示图片和错误消息。

我在文本输入上方有一个标签，需要垂直对齐所有内容。 在里面我有：

HTML：

<form>
    <label class="fine">LABEL NAME
        <strong>ERROR MESSAGE</strong><!--innerHTML changed by JS-->
        <img src="img.png"><!--src changed by JS-->
    </label>
</form>

CSS：

form label.fine{
    display: inline-block; 
    background-color: #212121;
    color: #fff;
    font-size: 0.8em;
    padding:0 0.5em 0 0.5em;
    width: 100%;
    border-bottom:1px solid #ff2222; // Changed by JS
    border-radius:0.2em 0.2em 0.2em 0.2em;
}

form label.fine img {
    display: inline-block; //Originally set to "none" and changed to "inline-block" by JS
    float: right;
}

form label.fine strong{
    font-size: 0.6em;
    color:#ff2222; //changed by JS
    text-decoration:bold;
}

Answer 1

HTML：

<img class="position" src="img.png" alt="">

CSS：

.position { vertical-align: super; }

这应该可以帮到你

Answer 2

我可能会绝对定位图像并添加位置：相对于表单label.fine