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