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>
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.