我想在网格项内部居中对齐内容,水平居中但垂直不居中。在JSfiddle上查看:http://jsfiddle.net/6zs8ydhf/
.container {
display: grid;
grid-template-columns: 200px auto;
grid-template-rows: 400px 200px;
}
.item {
border: 1px solid #111;
}
.item2 h1 {
display: flex;
align-items: center;
justify-content: center;
}
<div class="container">
<div class="item item1">
<h1>1</h1>
</div>
<div class="item item2">
<h1>2 应该居中</h1>
</div>
<div class="item item3">
<h1>3</h1>
</div>
</div>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
这是你需要做的:
.item { border: 1px solid #111; display: flex; align-items: center; justify-content: center; }