CSS flexible padding-divs with centered text inside, max-padding

Question

image

codepen

你好，我需要 CSS 样式方面的帮助。
我正在尝试有一个响应式主菜单，但无法想出一种方法来保持文本在元素框中水平居中，一旦这些由于视口(viewport)宽度较低而开始缩小。

.container {
  display: flex;
  justify-content: center;
}

这允许灵活的水平居中菜单项

.item {
  padding: 5px 30px;
  text-align: center;
}

发生的情况是，一旦框开始缩小，左边的填充将被保留，而右边的填充将被“溢出隐藏”，这会使文本相对于它们的 .item 容器偏离中心。
我需要文本在元素框内居中，同时在宽度足够时在文本周围保持一些固定的水平填充(扩大元素框)。

这是我尝试过的方法，但毫不奇怪，它没有用 :-)

.item {
  width: calc(auto + 60px);
  text-align: center;
}

感谢帮助

Answer 1

使用行高怎么样？

像这样http://jsbin.com/capixobihe/1/

#menu ul li {
  padding:6px;
  margin:0 5px;
  font-family:Arial;
  line-height:30px; /* <--- Set this */
  background-color:#FFF;
  display:inline-block;
}