display：table-cell with text-align：center

我正在研究滑入式，全屏導航類型的設置，一切工作都很好（雖然我完全接受改進概念的想法！）。我的問題是中心對齊垂直對齊的div中的文本。我已經在提供的筆中嘗試了通常的文本對齊：在每個ul，li，a和div上的中心，但沒有任何jive。display：table-cell with text-align：center

我試着用以下的裏添加一個div，但它只是作爲預期沒有工作：

ul li a { 
    display: table; 
    height: 25vh; 
} 

ul li a div { 
    display: table-cell; 
    vertical-align: middle; 
}

有什麼想法？

Codepen：http://codepen.io/robotsmeller/pen/OWOxor

來源

2017-02-01 robotsmeller

你只需要添加

ul li a { 
    line-height: 25vh; 
    margin: 0 auto; 
}

查看更新後的codepen http://codepen.io/anon/pen/qRxQrm

希望它有助於

來源

2017-02-01 05:31:15 Rahul

非常好，謝謝！那樣做了。我錯過了那麼愚蠢......：/乾杯隊友！ – robotsmeller

還有一個想法 - 任何想法爲什麼div不再可點擊作爲鏈接？我希望能夠點擊div上的任何位置來觸發反向幻燈片。 – robotsmeller

很高興我可以幫忙，你的東西非常酷;） – Rahul

使用此

ul li div a { 
    margin: 0 auto; 
}

來源

2017-02-01 05:32:57

display：table-cell with text-align：center

回答

相關問題