javascript - 我需要在标签中垂直对齐图像

我知道这篇文章已经做过很多次了，但是出于某些奇怪的原因，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;
}

最佳答案

HTML：

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

CSS：

.position { vertical-align: super; }

这应该对你有帮助