Center Image within the Button
Environment
| Product | Progress® Kendo UI® Button for jQuery |
| Product Version | 2018.2.516 |
Description
How can I create a square Kendo UI Button which has a centered image in the middle and which meets the following requirements?
- The standard CSS of the Button display a change in the color around the picture when it is pressed.
- The margins around the image are set to the smallest possible space and, yet, show all default Kendo UI CSS.
Solution
To center the image in a Button with a minimum space, use CSS.
The following example demonstrates how to render a centered image for all Buttons.
.k-button .k-image{
margin: auto;
}
.k-button {
padding: 0;
}
The following example demonstrates how to render a centered image for a specific Button.
#imageButtonID .k-image{
margin: auto;
}
#imageButtonID {
padding: 0;
}
The following example demonstrates the full implementation of the suggested approach.
<style type="text/css">
#imageButton .k-image{
margin: auto;
}
#imageButton {
padding: 0;
}
</style>
<button type="button" id="imageButton"><img class="k-image" alt="myUser"/><span/></button>
<script>
$(document).ready(function() {
$("#imageButton").kendoButton({
imageUrl: "https://demos.telerik.com/kendo-ui/content/chat/User.png"
});
});
</script>