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


i'm making edits simple bootstrap alert message use on website. want add image darker colored part on div right in 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 added "hover" effect when hover on image turns blue green.

html:

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

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

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

edit: "center" don't mean center of whole div. mean image aligned left, , centered.

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


Comments

Popular posts from this blog

matlab - error with cyclic autocorrelation function -

django - (fields.E300) Field defines a relation with model 'AbstractEmailUser' which is either not installed, or is abstract -

c# - What is a good .Net RefEdit control to use with ExcelDna? -