Question

你好，我需要css样式的帮助。
我想尝试一个响应主菜单，但是，由于视口宽度较低，文本开始收缩时，无法找到一种方法使文本在项目框内水平居中。

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

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

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

一旦盒子开始收缩，左边的填充物就会被保留，而右边的填充物会被“溢出 - 隐藏”＃34;这会使文本偏离其.item容器偏离中心。
我需要文本在项目框内保持居中，同时在宽度足够的时候在文本周围保留一些固定的水平填充（放大项目框）。

这是我尝试的，但不出所料它没有用： - ）

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

感谢您的帮助

Answer 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;
}

内部居中文本的CSS灵活填充div，max-padding

1 个答案: