v-是否无法正确对齐内容？

Question

我执行了一些Vue代码，该代码应该循环并使用<img>标签生成<p>，其中<p>标签在每个图像下方对齐。

然后将每个图像对齐，以从顶部填充一个网格，如下图所示： 我当前的代码：

<div v-for="(category, index) in ingredients">
    <div class="row full-padding">
        <div class="col-lg-6 text-left">{{index}}</div>
        <div v-bind:id="index + 'BUTTON'" class="col-lg-6 hoverable text-right" v-on:click="toggleShow(index)">[-]</div>
    </div>
    <div class="row full-padding" v-bind:id="index">
        <span v-if="!ingredient[2] && !ingredient[1]" v-for="(ingredient, ingdex) in category">
            <img class="ing-img hoverable" v-bind:src="ingredient[3]" v-on:click="toggleIngredient(ingredient)" v-bind:name="ingredient[0]" width="20%"/>
        </span>
    </div>
</div>

但是，当我更改代码以添加<p>{{ingredient[0]}}</p>来在图像下方显示每种成分的名称时，所有项目均未对齐！我该如何解决？为什么会发生这种情况？

发生了什么：

破损的代码：

<div v-for="(category, index) in ingredients">
    <div class="row full-padding">
        <div class="col-lg-6 text-left">{{index}}</div>
        <div v-bind:id="index + 'BUTTON'" class="col-lg-6 hoverable text-right" v-on:click="toggleShow(index)">[-]</div>
    </div>
    <div class="row full-padding" v-bind:id="index">
        <span v-if="!ingredient[2] && !ingredient[1]" v-for="(ingredient, ingdex) in category">
            <img class="ing-img hoverable" v-bind:src="ingredient[3]" v-on:click="toggleIngredient(ingredient)" v-bind:name="ingredient[0]" width="20%"/>
            <!-- This is the changed bit here -->
            <p>{{ingredient[0]}}</p>
        </span>
    </div>
</div>

CSS：

.hoverable:hover {
    cursor: pointer;
}

.ing-img {
    margin-right: 5%;
    margin-bottom: 5%;
    border: 3px solid #ddd;
    border-radius: 4px;
}

.rec-img {
    margin-right: 5%;
    margin-bottom: 5%;
    border: 3px solid #ddd;
    border-radius: 4px;
}

.full-padding {
    padding: 10px 10px 10px 10px;
}

.customBorder {
    border: 3px solid #ddd;
    border-radius: 4px;
    border-color: #FF4136;
}

#header {
    margin-bottom: 5%;
}

.ing-div {
    display: inline-block;
}