Twitter bootstrap Don'；更改段落行数时，t更改对齐a div'；s

我有一个关于div对齐的小问题。 在段落中，当增加行数时，div的对齐太差

我认为这个问题用sass中的“如果”语句解决了，但我不知道该怎么办

有人能帮我吗

---

发布你使用的代码更新我的问题我暂时删除了我的答案。很明显，你很难理解我给出的解决方案，所以你需要用一个工作代码片段来更新你的问题，这个代码片段可以重现你展示给我的图片的布局。那将是我帮助的唯一途径。

<div class="row content text-center">
            <div class="utility">
                <a href="#">
                    <div class="thumbnail custom-thumbnial">
                        <img src="img/icon1.png">
                        <div class="caption"><p>aaaaaaaaaaaa</p></div>
                    </div>
                </a>
                <a href="#">
                    <div class="thumbnail custom-thumbnial">
                        <img src="img/icon2.png">
                        <div class="caption"><p>aaaaaaa</p></div>
                    </div>
                </a>
                <a href="#">
                    <div class="thumbnail custom-thumbnial">
                        <img src="img/icon3.png">
                        <div class="caption"><p>aaaaaaaa</p></div>
                    </div>
                </a>


            </div>
        </div>

.content {


background: -webkit-linear-gradient(#27AFFD, #1674A8); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#27AFFD, #1674A8); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#27AFFD, #1674A8); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#27AFFD, #1674A8); /* Standard syntax (must be last) */
  padding-right: 1%;
  height: 60vh;
  diaplay: flex;

  .custom-thumbnial {
    background: url(../img/icon-bg.png);
    background-repeat: no-repeat;
    background-position: center;
    border: none;

    box-shadow: none;
    margin: 0 20px;
    .utility {
      position: relative;   
      }
    img {
      padding-top: 47%;
    }
    .caption {
      color: $color11;
      word-break:break-all; 
    }
  }}