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

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;值从 display:none; 更改至 display:inline-block;通过 Javascript 在 <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; }

这对你有帮助