相关疑难解决方法(0)

Flexbox:水平和垂直居中

如何使用flexbox在容器中水平和垂直居中div.在下面的例子中,我希望每个数字彼此相同(在行中),它们是水平居中的.

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
row {
  width: 100%;
}
.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin: 10px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}

Run Code Online (Sandbox Code Playgroud)

<div class="flex-container">
  <div class="row">
    <span class="flex-item">1</span>
  </div>
  <div class="row">
    <span class="flex-item">2</span>
  </div>
  <div class="row">
    <span class="flex-item">3</span>
  </div>
  <div class="row">
    <span class="flex-item">4</span>
  </div>
</div>

Run Code Online (Sandbox Code Playgroud)

http://codepen.io/anon/pen/zLxBo

html css html5 css3 flexbox

bsr*_*bsr

2016 10-23

588
推荐指数

9
解决办法

90万
查看次数

如何将CSS Grid中最后一行的元素居中？

我正在使用CSS网格来布局这样的项目......

#container {
  display: grid;
  grid-template-columns: 16.666% 16.666% 16.666% 16.666% 16.666% 16.666%;
}

.item {
  background: teal;
  color: white;
  padding: 20px;
  margin: 10px;
}

Run Code Online (Sandbox Code Playgroud)

<div id="container">
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
</div>

Run Code Online (Sandbox Code Playgroud)

如何让最后一行居中而不是左对齐？我不能保证项目的数量,所以想要使布局看起来适合任意数量的项目.

这是我应该使用flexbox吗？或者CSS网格是否合适？

html css css3 flexbox css-grid

fig*_*r20

2017 09-18

18
推荐指数

5
解决办法

8426
查看次数