文字前的图片合二为一 div

Question

在我的情况下，是否可以在 div 内的文本之前放置图像（css 内容属性）？

JavaScript 将不同的消息插入到带有 msgBox 的元素中。 不幸的是我无法接触 JS。 另外文字必须居中（图片中间）。

要求：

消息正文居中
图文之间10-20px强
Div不得包含其他元素
文本和图标应居中。

document.getElementById("msgBox")
  .innerHTML = "Here can be any text any long";

#msgBox {
  border: 1px solid black;
  padding: 10px;
  text-align: center;
}

<div id="msgBox">(icon) text</div>

Answer 1

你可以试试 css :before:

#msgBox:before{
    content: url('path/to/your.png');
}

http://jsfiddle.net/a4utqvh1/1/

Answer 2

您可以在css中使用:before将您的图标添加为背景图片，这样即使您在JS中更改div的内容，图标仍然是那里。

#msgBox:before {
    content: "";
    display: inline-block;
    width: 10px; // width of your image
    height: 10px; // height of your image
    background: url('img.jpg'); // path to your image
}

Answer 3

http://jsfiddle.net/a4utqvh1/3/

.wrapper {
  border: 1px solid black;
  padding: 10px;
  text-align: center;
  float: left;
}

.wrapper img,
#msgbox {
  float: left;
}

<div class="wrapper">
  <img src="http://png.findicons.com/files/icons/2015/24x24_free_application/24/error.png" />
  <div id="msgBox">(icon) text</div>
</div>

Answer 4

这里是fiddle使用图片作为背景图片

消息框{

border: 1px solid black;
padding: 10px;
text-align: center;
background: url(http://png.findicons.com/files/icons/2015/24x24_free_application/24/error.png) no-repeat 5px center;

}

http://jsfiddle.net/a4utqvh1/4/ 这行得通吗

Answer 5

您可以通过设置图像的 height 和 verticle align:middle css 并将图像放在文本之前来实现。这是更新后的 fiddle

http://jsfiddle.net/a4utqvh1/2/

Answer 6

您可以使用 background-image-Attribute 形式的 div-Element。

#msgBox {
  ...
  background-image: url('http://png.findicons.com/files/icons/2015/24x24_free_application/24/error.png');
  background-repeat: no-repeat;
  background-position-y: center;
  ...
}

填充良好的示例： http://jsfiddle.net/bronni/a4utqvh1/7/

Answer 7

希望这可行，将图像标签放在 innerHTML 文本中

document.getElementById("msgBox").innerHTML = "<img src='http://png.findicons.com/files/icons/2015/24x24_free_application/24/error.png'/> <span>Here can be any text any long</span>";

#msgBox {
    border: 1px solid black;
    padding: 10px;
    text-align: center;
}

<div id="msgBox">(icon) text</div>

文字前的图片合二为一 div

Image before text in one div

html

css

css-selectors