Question

图片默认尺寸为：width =＆＃34; 65px＆＃34; height =＆＃34; 67px。我想让它集中对齐。如果上传的图像大小不匹配，请说宽度：100px，高度为20px，那么我想让这个图像对齐中心。

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

Answer 1

以下CSS类将在页面上居中显示图像，无论其大小

.middle {
  text-align: center;
}

嗯，严格来说，它会将它放在它的父元素中，但在视觉上它可能就是你想要的。

Answer 2

我修改了代码并且它有效..

<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" style="vertical-align: middle;"/></g:if>
        <g:else><img src="${resource(dir: 'images', file: 'default.png')}" alt="Profile Picture"></g:else>
    </g:link>
</div>

制作图像的Grails在gsp中对齐

2 个答案: