Question

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

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

CSS：

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

JavaScript使用msgBox将不同的消息插入到元素中。 不幸的是，我无法触及JS。 文本也必须位于中心（图片中间）。

JS：

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

最重要的是： msgBox 不得包含其他div块或任何元素（span div等）。
http://jsfiddle.net/dmitmedv/a4utqvh1/
谢谢！

更新
要求：

消息文本位于中心
图像和文字之间强烈10-20px
Div不得包含其他元素
文字和图标应居中。

Answer 1

您可以尝试使用css :before：

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

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

Answer 2

您可以通过设置图片的height和verticle align:middle css并在图片之前放置图片来实现此目的。这是更新的小提琴

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

Answer 3

您可以在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 4

HTML -

<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>

CSS -

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

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

Answer 5

这是使用图像作为背景图像的小提琴

msgBox {

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 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文本中

＆＃13;

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>";

＆＃13;

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

＆＃13;

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

＆＃13;

在一个div中的文本之前的图像

7 个答案: