动态居中行内的元素

Question

我在 row 中有两个带链接的图片。有时只需要一张图片，所以我添加了 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>

谢谢。

Answer 1

更好的方法是将 .col-sm-3.col-xs-6 转换为 inline-block 元素并将 text-center class 转换为 .row

.col-sm-3.col-xs-6 {
  display: inline-block;
  float:none;
  width:auto;
}

img {
  width: 100px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class=container>
  <div class="row text-center">
    <div class="col-sm-3 col-xs-6">
      <a href="${content.facebookLink}" target="_blank">
        <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
      </a>
    </div>
    <div class="col-sm-3 col-xs-6">
      <a href="${content.twitterLink}" target="_blank">
        <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
      </a>
    </div>
  </div>
</div>


<div class=container>
  <div class="row text-center">
    <div class="col-sm-3 col-xs-6">
      <a href="${content.twitterLink}" target="_blank">
        <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
      </a>
    </div>
  </div>
</div>

Answer 2

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

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

工作完美。

动态居中行内的元素

Dynamically Center Elements inside a Row

html

css

jstl