如何将图片放在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）的回答。

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