CSS灵活浸轧的div居中文本里面，MAX-填充

你好，我需要用CSS样式帮助。
我想要一个响应主菜单，，但不能找出一种方法来保持文本水平居中在项目框中，一旦这些开始收缩由于视口宽度低。

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

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

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

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

这是我尝试过，但勿庸置疑它没有:-)

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

感谢工作的帮助

来源

2015-05-29 brano.vaclav

任何的jsfiddle或演示？ –

对低视口朋友使用媒体查询。 –

我使用低视口的媒体查询。那将是移动视图。这是桌面视图。然而，由于我无法保证单个菜单项的数量和宽度，因此我需要视图以可用和美观的方式缩小/降级（这正是Flexbox为无论如何设计的）。你的建议会表明我需要为每个可能的视口宽度创建一个媒体查询:-) –

有关使用的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; 
}

来源

2015-05-29 13:05:14

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

CSS灵活浸轧的div居中文本里面，MAX-填充

回答

相关问题