如何将图像放在div的中心？

Question

我正在编辑要在我的网站上使用的简单Bootstrap警报消息。我想将图像添加到中心右侧div上的深色部分。

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

我还添加了“悬停”效果，因此当您将鼠标悬停在图像上时，它会从蓝色变为绿色。

HTML：

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

产品： http://prntscr.com/8xb32o

我想将图标/图像放在“结果”左侧的深色部分。

编辑：“中心”我不是指整个div的中心。我的意思是图像左对齐，也居中。

Answer 1

像这样更新您的.alert-info类

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

}

将线性渐变颜色参数更新为14％

Answer 2

我会推荐以下内容：

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>

Answer 3

致记者：Ricardo Rossi的回答。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;