How do I put an image in the center of a div?

Question

I'm making edits to the simple Bootstrap alert message to use on my website. I want to add an image to the darker colored part on the div right in the center.

CSS:

.alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: Tahoma;
}

.alert-info {
  color: #3a87ad;
  /* background-color: #d9edf7; */
  background: linear-gradient(to right,  #bce8f1 0%,#bce8f1 5%,#d9edf7 5%,#d9edf7 100%);
  border-color: #bce8f1;
}
}

.alert-info hr {
  border-top-color: #a6e1ec;
}

.alert-info .alert-link {
  color: #2d6987;
}

.alert:hover {
  color: #4DAD3A;
  background: linear-gradient(to right,  #BCF1BC 0%,#BCF1BC 5%,#D9F7DA 5%,#D9F7DA 100%);
  border-color: #C2F1BC;
}

.padding {
  padding-left: 57px;
}

I also added a "hover" effect so when you hover over the image it turns from blue to green.

HTML:

<div class="alert alert-info padding">{text}</div>

Product: http://prntscr.com/8xb32o

I want to put the icon/image in the dark colored part on the left side of "result".

EDIT: By "center" I don't mean the center of the whole div. I mean the image is aligned to the left, and also centered.

Possible duplicate of [How to make an image center (vertically & horizontally) inside a bigger div](http://stackoverflow.com/questions/388180/how-to-make-an-image-center-vertically-horizontally-inside-a-bigger-div) — Rob, Oct 31 '15 at 02:52
EDIT: By "center" I don't mean the center of the whole div. I mean the image is aligned to the left, and also centered. — Bellator, Oct 31 '15 at 03:00
There are other SO answers for that, too, found by searching. — Rob, Oct 31 '15 at 03:01

Prem · Answer 1 · 2015-10-31T02:51:23.370

0

Update your .alert-info class like this

.alert-info {
color: #3a87ad;
/* background-color: #d9edf7; */
background: linear-gradient(to right,  #bce8f1 0%,#bce8f1 14%,#d9edf7 5%,#d9edf7 100%);
border-color: #bce8f1;

}

updated linear-gradient color param to 14%

edited Oct 31 '15 at 02:51

answered Oct 31 '15 at 02:38

Prem

157
7

Add width to your alert class – Prem Oct 31 '15 at 02:39
Then that would make the div class shorter by default. Now, it fills to it's container. With "width: 57px" it'll be that width. But, do you have any insight on how to add the image? – Bellator Oct 31 '15 at 02:44
That made the height decrease, and the round edges disappear. It's now a vertically short rectangle. – Bellator Oct 31 '15 at 02:50
can you take a look at this link http://jsfiddle.net/uzaG9/945/ ? Rounded edge still there (border changed to red for highlight) – Prem Oct 31 '15 at 03:01

score 0 · Accepted Answer · answered Oct 31 '15 at 02:57

0

I would recommend the following:

http://codepen.io/anon/pen/wKXmNq

.alert-icon {
  background-image: url("http://tinyurl.com/q8pt6wb");
  background-repeat: no-repeat; 
}

.alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: Tahoma;
}

.alert-info {
  color: #3a87ad;  
  background: linear-gradient(to right, #bce8f1 0%, #bce8f1 60px, #d9edf7 5%, #d9edf7 100%);
  border-color: #bce8f1;
}
}
.alert-info hr {
  border-top-color: #a6e1ec;
}
.alert-info .alert-link {
  color: #2d6987;
}
.alert:hover {
  color: #4DAD3A;
  background: linear-gradient(to right, #BCF1BC 0%, #BCF1BC 5%, #D9F7DA 5%, #D9F7DA 100%);
  border-color: #C2F1BC;
}
.padding {
  padding-left: 60px;
}

<div class="alert alert-info">
  <div class="alert-icon" />
  <div class="padding">Result</div>
</div>

answered Oct 31 '15 at 02:57

Ricardo Rossi

524
5
13

This is exactly what I needed! Thank you so much. – Bellator Oct 31 '15 at 03:00
Although... I copied your code exactly, and no image showed. – Bellator Oct 31 '15 at 03:04
I just used this sample image http://tinyurl.com/q8pt6wb but you can replace it with a url to whatever image you want – Ricardo Rossi Oct 31 '15 at 03:06
This is my entire code now: http://codepen.io/anon/pen/JYZLQP. You can look it over but I don't understand. If it matters: I am creating this code in XenForo, meaning I'm creating a custom BBCode. Not sure if that matters though. – Bellator Oct 31 '15 at 03:15
See my changes to the html in my example above and you will notice that I added a div with a class of alert-icon. – Ricardo Rossi Oct 31 '15 at 03:17
Ah. It worked (I re-published the codepen) and now I've added my image which is 32x32. The image is cut in half, although. Have any insight on that? EDIT: Nevermind. I applied height/width forgot about that. – Bellator Oct 31 '15 at 03:20

score 0 · Answer 3 · answered Nov 01 '15 at 23:17

Credits to: Ricardo Rossi for answer.

.alert-icon {
  background-image: url("http://tinyurl.com/q8pt6wb");
  background-repeat: no-repeat; 
}

.alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: Tahoma;
}

.alert-info {
  color: #3a87ad;  
  background: linear-gradient(to right, #bce8f1 0%, #bce8f1 60px, #d9edf7 5%, #d9edf7 100%);
  border-color: #bce8f1;
}
}
.alert-info hr {
  border-top-color: #a6e1ec;
}
.alert-info .alert-link {
  color: #2d6987;
}
.alert:hover {
  color: #4DAD3A;
  background: linear-gradient(to right, #BCF1BC 0%, #BCF1BC 5%, #D9F7DA 5%, #D9F7DA 100%);
  border-color: #C2F1BC;
}
.padding {
  padding-left: 60px;
}

<div class="alert alert-info">
  <div class="alert-icon" />
  <div class="padding">Result</div>
</div>

How do I put an image in the center of a div?

3 Answers3