CSS 灵活的 padding-divs，里面有居中的文本，max-padding答案

【问题标题】：CSS flexible padding-divs with centered text inside, max-paddingCSS 灵活的 padding-divs，里面有居中的文本，max-padding
【发布时间】：2015-05-29 22:18:30
【问题描述】：

image

codepen

你好，我需要 CSS 样式方面的帮助。
我正在尝试有一个响应式主菜单，但无法找到一种方法使文本在项目框中保持水平居中，一旦这些因视口宽度低而开始缩小。

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

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

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

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

这是我尝试过的，但不出所料，它不起作用:-)

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

感谢帮助

【问题讨论】：

任何 jsfiddle 或演示？
对低视口好友使用媒体查询。
我将媒体查询用于低视口。那将是移动视图。这是桌面视图。然而，由于我不能保证单个菜单项的数量和宽度，我需要视图以实用和美观的方式缩小/降级（这就是 flexbox 的设计目的）。您的建议表明我需要为每个可能的视口宽度创建一个媒体查询:-)
我添加了一个 codepen 示例。尝试调整视口窗口的大小以查看文本标签如何偏离中心

标签： css responsive-design centering

【解决方案1】：

使用 line-height 怎么样？

点赞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;
}

【讨论】：

问题在于水平居中，而不是垂直居中。我需要文本在容器内水平居中，即（文本宽度 + 左右填充）像素宽或更小。