element中el-row的for循環展示遇到的浮動問題和div中用span，文字不在div內

1第一個問題主要是樣式上的問題<el-col>里面有DIV想設置div的樣式，必須設置高度，否則點擊的時候會到處浮動，排列有問題

 

 

2文字不在div內：主要原因是div的line-height有默認的值需要重新設置line-height

 

 <el-row :gutter="24">
              <el-col v-for="(item, index) in imageList" :key="item.url" :xs="12" :sm="8" :md="6"
                      style="padding-right: 10px">
                <div  @click="selectImg(item)" v-model="resources_id"
                     :active="resources_id==item.module_graphics_id"
                     class="image_list_div">
                  <div style="height: 90%">
                    <img class="img_url" :src="`${baseUrl}`+item.module_graphics_path"/><br/>
                  </div>
                   <div style="height: 10%;line-height: 100%;text-align: center">
                    {{item.module_resources_name}}
                   </div>
                </div>
              </el-col>
    </el-row>

.image_list_div{
  padding-right: 10px;height: 60px; margin-bottom: 10px;
}