相关疑难解决方法(0)

如何使用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;
}

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

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

我想使用弹性框垂直对齐一些内容,<li>但没有取得很大的成功.

我已经在网上查了一下,很多教程实际上都使用了一个包装div来获取align-items:center父对象的flex设置,但是我想知道是否可以删除这个额外的元素？

我选择在此实例中使用弹性框,因为列表项高度将是动态%.

* {
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100%;
}

ul {
  height: 100%;
}

li {
  display: flex;
  justify-content: center;
  align-self: center;
  background: silver;
  width: 100%;
  height: 20%;
}

<ul>
  <li>This is the text</li>
</ul>

我希望flex项目占据全高,但是它们内部的内容是垂直居中的.

justify-content: centre不起作用,并align-self: centre在项目本身将其高度缩小到自己的内容,而我希望所有项目都是相同的高度.

在这个例子中,我希望数字垂直居中:http://codepen.io/ilyador/pen/ogYbWO？editors = 110

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;  
}

.flex-item {
  flex: 1 1;
  background: tomato;
  padding: 5px;
  margin-top: 10px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
  border: solid 1px red;
}

<ul class="flex-container">
  <li class="flex-item">1fbdms s s sdj dfkg kjfg dkfj gdfjkgdfkj gdfkjg dfkjgdkhdfjk gkjdfkjdfgdfg jkdfgdfjkgk </li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
  <li class="flex-item">6</li>
</ul>

目前我的"flex"项目看起来像这样(垂直对齐:顶部)......

 _____________________________________
   1

 _____________________________________
   2

 _____________________________________
   3

 _____________________________________
   4

 _____________________________________

我的目标是使它们看起来像这样(垂直对齐:中间)......

 _____________________________________

   1
 _____________________________________

   2
 _____________________________________

   3
 _____________________________________

   4
 _____________________________________

我的要求:

• 柔性容器必须保持100%的高度
• 弹性项目必须保持25%的高度(相当于100%,无论如何这是默认值).
• 弹性项目必须垂直居中.
• 这必须具有响应性并且足够智能以保持在每个设备的中间(因此没有行高/填充)

http://jsfiddle.net/oneeezy/p4XtA/

HTML

<!-- Flex Box -->
<section>

    <!-- Flex Items -->
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>

</section>

CSS

/* Flex Box */
section { padding: 1em; background: black; display: flex; flex-flow: column; height: 100%; justify-content: space-around; }

/* Flex Items */
div { border-top: 1px solid #ccc; background: #f2f2f2; height: 25%; }
div:first-child { border-top: 1px …