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-填充

回答

相關問題