对齐图例标记内的两个元素

Question

如何将图像与文本对齐？

<fieldset>
  <legend>
    <img src="http://www.placehold.it/50" width="50" height="50" />
    <label id="dettagli_ordine">Dettagli Ordine N° ${numero_ordine}</label>
  </legend>
</fieldset>

Answer 1

您可以使用vertical-align: middle图像元素：

legend img {
  vertical-align: middle;
}

<fieldset>
  <legend>
    <img src="resources/images/pacco.gif" width="50" height="50" />
    <label id="dettagli_ordine">Dettagli Ordine N° ${numero_ordine}</label>
  </legend>
  </fiedset>

Answer 2

使用CSS背景作为装饰图像

理想情况下，您可以在CSS中使用图例元素的背景图像。 CSS背景应该用于显示装饰图像。

旁白：标签元素不应放在图例中，因为图例为整个字段集内容提供了标题，标签用于输入标签。

---

传奇样式提示： <legend>元素可能非常难以设计，尤其是跨浏览器。通过在内部使用<span>并对其应用样式，可以获得额外的控制。

示例：

<legend><span>I am a legend... text</span></legend>

---

让我们用背景图片

工作示例

为图例指定高度，并根据需要使用填充和行高移动文本：

legend {
  background: url(http://www.placehold.it/50) no-repeat;
  height: 50px;
  line-height: 50px;
  padding: 0 0 0 60px;
}

<fieldset>
  <legend>
    Dettagli Ordine N° ${numero_ordine}
  </legend>
</fieldset>

Answer 3

img,
img + label {
    vertical-align: middle
}

jsFiddle Example

Answer 4

将属性align="middle"添加到图像

检查：http://jsfiddle.net/htj6shwt/