我正在尝试制作响应式图像网格。使用 Vuejs，我能够使用 ul 和 li 标签制作网格。像这样:
<section class="featured-foods">
<ul class="food-cards">
<li class="food-card background-fix" v-for="featuredImage in featuredImages" v-bind:style="{ 'background-image': 'url(' + featuredImage + ')' }"></li>
</ul>
</section>
然后我使用这段 SASS 代码将它变成一个网格:
.food-card
width: 20rem
height: 20rem
margin-top: 1rem
margin-left: 1rem
list-style-type: none
float: left
display: flex
flex-wrap: wrap
所以问题是，我应该如何将这段代码居中？
这是我的代码。到目前为止，标题没有响应。所以它看起来像这样很正常。
var app = new Vue ({
el: "#app",
data: {
headerImages: [{
image: 'https://static.pexels.com/photos/574111/pexels-photo-574111.jpeg',
name: "Pancake Glamorousness"
}, {
image: 'https://static.pexels.com/photos/271715/pexels-photo-271715.jpeg',
name: "Sushisland"
}, {
image: 'https://static.pexels.com/photos/161640/abstract-barbecue-barbeque-bbq-161640.jpeg',
name: "BBQ Drizzle"
}],
featuredImages: ['https://static.pexels.com/photos/161640/abstract-barbecue-barbeque-bbq-161640.jpeg', 'https://static.pexels.com/photos/161640/abstract-barbecue-barbeque-bbq-161640.jpeg', 'https://static.pexels.com/photos/161640/abstract-barbecue-barbeque-bbq-161640.jpeg', 'https://static.pexels.com/photos/161640/abstract-barbecue-barbeque-bbq-161640.jpeg', 'https://static.pexels.com/photos/161640/abstract-barbecue-barbeque-bbq-161640.jpeg', 'https://static.pexels.com/photos/161640/abstract-barbecue-barbeque-bbq-161640.jpeg', 'https://static.pexels.com/photos/161640/abstract-barbecue-barbeque-bbq-161640.jpeg','https://static.pexels.com/photos/161640/abstract-barbecue-barbeque-bbq-161640.jpeg', 'https://static.pexels.com/photos/161640/abstract-barbecue-barbeque-bbq-161640.jpeg', 'https://static.pexels.com/photos/161640/abstract-barbecue-barbeque-bbq-161640.jpeg', 'https://static.pexels.com/photos/161640/abstract-barbecue-barbeque-bbq-161640.jpeg', 'https://static.pexels.com/photos/161640/abstract-barbecue-barbeque-bbq-161640.jpeg', 'https://static.pexels.com/photos/161640/abstract-barbecue-barbeque-bbq-161640.jpeg', 'https://static.pexels.com/photos/161640/abstract-barbecue-barbeque-bbq-161640.jpeg', 'https://static.pexels.com/photos/161640/abstract-barbecue-barbeque-bbq-161640.jpeg', 'https://static.pexels.com/photos/161640/abstract-barbecue-barbeque-bbq-161640.jpeg', 'https://static.pexels.com/photos/161640/abstract-barbecue-barbeque-bbq-161640.jpeg', 'https://static.pexels.com/photos/161640/abstract-barbecue-barbeque-bbq-161640.jpeg', 'https://static.pexels.com/photos/161640/abstract-barbecue-barbeque-bbq-161640.jpeg', 'https://static.pexels.com/photos/161640/abstract-barbecue-barbeque-bbq-161640.jpeg']
}
})*{margin:0px;padding:0px}.full-height{height:100%}.full-width{width:100%}.header-grid{height:100vh;display:grid;grid-template-columns:50% 50%}.header-row-grid{display:grid;grid-template-rows:50% 50%}.background-fix{background-position:center;background-size:cover}.header-text{color:#fff;display:flex;align-items:center;justify-content:center;height:100%;font-family:"Absinthe", cursive;font-size:4rem}.food-card{width:20rem;height:20rem;margin-top:1rem;margin-left:1rem;list-style-type:none;float:left;display:flex;flex-wrap:wrap}
/*# sourceMappingURL=style.css.map */<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Scrumptious</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app">
<header class="header-grid">
<div class="full-height full-width background-fix lg-card-animation" v-bind:style="{ 'background-image': 'url(' + headerImages[0].image + ')' }">
<h1 class="header-text">{{ headerImages[0].name }}</h1>
</div>
<div class="header-row-grid">
<div class="full-height full-width background-fix" v-bind:style="{ 'background-image': 'url(' + headerImages[1].image + ')' }">
<h1 class="header-text">{{ headerImages[1].name }}</h1>
</div>
<div class="full-height full-width background-fix" v-bind:style="{ 'background-image': 'url(' + headerImages[2].image + ')' }">
<h1 class="header-text">{{ headerImages[2].name }}</h1>
</div>
</div>
</header>
<section class="featured-foods">
<ul class="food-cards">
<li class="food-card background-fix" v-for="featuredImage in featuredImages" v-bind:style="{ 'background-image': 'url(' + featuredImage + ')' }"></li>
</ul>
</section>
</div>
</body>
</html>最佳答案
试试这个:
.featured-foods{
position: relative;
}
.food-cards{
display: flex;
flex-wrap: wrap;
position: absolute;
left: calc(40% - 30%);
li{
width: 20rem;
height: 20rem;
margin-top: 1rem;
margin-left: 1rem;
list-style-type: none;
}
}
然后使用媒体查询来调整左侧位置
关于html - 我应该采用哪种方法来居中这个李，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48475091/