Html 在行内动态居中放置元素

我在

行中有两个带有链接的图像

。有时只需要一个图像，所以我添加了

JSTL

标记来验证这一点。问题是当我只显示一个图像时。那他们就没有居中了。只有当两个图像都可用时，它才居中。如何解决这个问题

<div class="row">
    <c:if test="${content.facebookLink ne 'NO_FACEBOOK_LINK'}">
        <div class="col-sm-3 col-sm-offset-3 col-xs-6">
            <a href="${content.facebookLink}" target="_blank">
                <img src="<c:url value="/resources/images/fb.png"/>">
            </a>
        </div>
    </c:if>
    <c:if test="${content.twitterLink ne 'NO_TWITTER_LINK'}">
        <div class="col-sm-3 col-xs-6">
            <a href="${content.twitterLink}" target="_blank">
                <img src="<c:url value="/resources/images/twitter.png "/>">
            </a>
        </div>
    </c:if>
</div>

---

谢谢。

更好的方法是将

.col-sm-3.col-xs-6

转换为

内联块

元素，并使用

文本中心

类转换为

.row

.col-sm-3.col-xs-6{
显示：内联块；
浮动：无；
宽度：自动；
}
img{
宽度：100px；
}

---

找到了一个简单的解决方案。从动态元素中省略了列

<div class="row">
    <div class="col-md-12">
        <c:if test="${content.facebookLink ne 'NO_FACEBOOK_LINK'}">
            <a href="${content.facebookLink}" target="_blank" style="display: inline">
                <img src="<c:url value="/resources/images/fb.png"/>">
            </a>
        </c:if>
        <c:if test="${content.twitterLink ne 'NO_TWITTER_LINK'}">
            <a href="${content.twitterLinkk}" target="_blank" style="display: inline">
                <img src="<c:url value="/resources/images/twitter.png "/>">
            </a>
        </c:if>
    </div>
</div>

---

工作完美。

我认为您不能更改网格布局或HTML，因为它是动态的，否则使用

内联
元素和
文本对齐：居中
到父元素是更好的选择。