CODEWITHSUNDEEP
htmlcsscss-selectors
DmitMedv
DmitMedv

Reputation: 1010

Image before text in one div

Is it possible to put image (css content property) before text inside div in my case?

JavaScript inserts different messages into the element with msgBox. And unfortunatelly I cannot touch JS. Also text must be in the center (in the middle of the picture).

Requirements:

  1. Message text is in the center
  2. Between image and text strongly 10-20px
  3. Div must not contain other elements
  4. Text and icon should be centered.

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>

Upvotes: 0

Views: 5724

Answers (7)

Jason
Jason

Reputation: 696

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>

Upvotes: 0

coDe murDerer
coDe murDerer

Reputation: 1876

may this will work, put image tag in innerHTML text

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>

Upvotes: 0

Mike Bovenlander
Mike Bovenlander

Reputation: 5426

You could try it with css :before:

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

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

Upvotes: 3

Christoph
Christoph

Reputation: 156

You can use the background-image-Attribute form a 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;
  ...
}

A Sample with nice padding: http://jsfiddle.net/bronni/a4utqvh1/7/

Upvotes: 0

Twix
Twix

Reputation: 422

You can achieve this by setting height and verticle align:middle css of image and put image before text. Here is the updated fiddle

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

Upvotes: 0

Sydonia
Sydonia

Reputation: 107

Here is the fiddle using image as a background image

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/ will this work

Upvotes: 0

Andy
Andy

Reputation: 4778

You can use :before in css to add your icon as a background image, so even if you change the content of your div in JS, the icon will still be there.

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

Upvotes: 0

Related Questions