New to Kendo UI for jQuery? Download free 30-day trial

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>

See Also

In this article