需要在一个盒子内将文字水平垂直居中对齐
<template>
<div>
<div class="wrapper">
<div class="wrapper-content" v-for="item in dataList">
<div class="child-box">
<span class="child-font">{{item.id}}</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Test',
data () {
return {
dataList: [
{ id: 1, name: 'F1' },
{ id: 2, name: 'F2' },
{ id: 3, name: 'F3' },
{ id: 4, name: 'F4' },
{ id: 5, name: 'F5' },
{ id: 6, name: 'F6' },
{ id: 7, name: 'F6' },
]
}
},
}
</script>
<style scoped>
.wrapper{
width: 100%;
height: auto;
display: flex;
justify-content: space-between;
flex-direction: row;
flex-wrap: wrap;
}
.wrapper-content{
width: 33%;
margin-top: 20px;
}
/*
在盒子中水平垂直居中
*/
.child-box {
box-shadow: 0 0 30px 2px #918f8f;
width: 300px;
height: 200px;
display: flex;
flex-direction: column;
justify-content: center;
margin: 0 auto;
text-align: center;
}
.child-font {
color: #2D71DB;
}
</style>