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
Post a Comment