CSS Flex拉伸不与垂直对齐一起工作

这个问题在这里已经有了答案：

Flexbox：水平和垂直居中8个答案

---

如果你还使内部div是一个flex容器，你可以垂直居中它们的文本/内容。

堆栈片段

nav {
  display: flex;
  /*align-items: stretch;              stretch is default, so this is not needed  */
  justify-content: center;
  background: #60B99A;
  color:white;
}

nav div {
  display: flex;                   /*  added  */
  align-items: center;             /*  added  */
}

nav div:hover {
  color: #60B99A;
  background: white;
}

nav div img {
  display: block;                  /*  remove the bottom white space  */
}

<nav>
    <div><img src="http://placehold.it/100x150/f00"></div>      
    <div>Artists</div>                          
    <div>Playlists</div>
    <div>Genres</div>
</nav>

链接地址: http://www.djcxy.com/p/76005.html

上一篇: CSS Flex stretch not working together with vertical align

下一篇: How to center flex block in center page?