Search code examples
grailsgsp

Grails making image align to center in gsp


The image default size is :width="65px" height="67px.I want to make it centrally aligned. If the uploaded image size doesnot match lets say width:100px and height is 20px then i want to make this image align center.

 <div class="photo">
        <g:link controller="hcpHubUser" action="edit">
            <g:if test="${userInstance?.serverPictureName}"><r:img
                    uri="/pictures/${userInstance?.serverPictureName}" onError="this.onerror=null;this.src='${createLinkTo(dir: 'images', file: 'default.png')}';" alt="Profile Picture" width="65px"
                    height="67px"/></g:if>
            <g:else><img src="${resource(dir: 'images', file: 'default.png')}" alt="Profile Picture"></g:else>
        </g:link>
    </div>

Solution

  • The following CSS class will center an image on the page regardless of it's size

    .middle {
      text-align: center;
    }
    

    Well, strictly speaking, it will center it within it's parent element, but visually it's probably what you want.