Question

我尝试使用flexbox构建一个带有以下想法的菜单：物品之间的空间，相等的高度，居中的文字（水平和垂直）。

ul {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  justify-content: center;
}

li {
  width: 32.25%;
  align-items: center;
}

span {
  text-align: center;
  display: block;
  height: 100%;
}

<ul>
  <li><span>Item</span></li>
  <li><span>Item</span></li>
  <li><span>Item - much much much much much much much much much much more longer</span></li>
</ul>

我该怎么做才能得到一个正确的菜单，我应该怎么做才能使文本水平居中并且（！）垂直？

铜

沃尔克 menu with flexbox

Answer 1

也让li flex-parents。无需设定高度。 display:flex的高度（最高）都相同，li可以根据需要调整ul { margin: 0; padding: 0; list-style-type: none; display: flex; justify-content: space-between; } li { display: flex; flex: 0 0 32.5%; align-items: center; justify-content: center; border: 1px solid grey; } span { text-align: center; }的内容。

＆＃13;

<ul>
  <li><span>Item</span></li>
  <li><span>Item</span></li>
  <li><span>Item - much much much much much much much much much much more longer</span></li>
</ul>

＆＃13;

public function states()
{
    return $this->hasMany('App\Models\Masters\State')->select('*');
}

＆＃13;

Answer 2

将align-items: center;添加到ul。

CSS align-items 属性定义浏览器如何沿其容器的横轴在Flex项目之间和周围分配空间。这意味着它的作用就像对齐内容，但是在垂直方向上。

有关详情，请按MDN article

参考代码：

＆＃13;

ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

li {
  width: 32.25%;
  align-items: center;
}

span {
  text-align: center;
  display: block;
  height: 100%;
}

＆＃13;

<ul>
  <li><span>Item</span></li>
  <li><span>Item</span></li>
  <li><span>Item - much much much much much much much much much much more longer</span></li>
</ul>

＆＃13;

flexbox具有间距，相等高度，垂直和水平居中项目

2 个答案: