中心“ ul”元素具有設置的寬度

Question

我想將未排序的列表設置為“背景”。 為此，我將其分配為非常寬，以便與打開2560px寬度的頁面的任何屏幕都匹配。 但是除非有一些技巧，否則我無法使其完全集中在CSS上。 我願意走jquery的方式。 從技術上講，ul將具有與background-position：top center;相同的效果。

我用代碼代替它附加代碼，而不是代碼（添加代碼）

<div style="background-color:black; width:100%; overflow:hidden; height:302px; text-align:center; position:relative">
<ul style="padding:0px; margin:0px; text-align:center; width:2560px; height:100%; margin:0 auto 0; position:relative;">
    <li class="image"></li><li class="image"></li><li class="image"></li><li class="image"></li><li class="image"></li><li class="image">

</ul>
</div>

我使用了內聯CSS，因此可以更清楚地知道我要做什么。

任何幫助表示贊賞

Answer 1

這是您想要的小提琴嗎？ 我說“背景”時您沒有正確解釋

的CSS

ul{
    list-style-type: none;
    margin: 0;
    position: relative;
    text-align: center;
    width: 100%;
    background:#FF0000;
}


ul li {
    display: inline-block;
    height: 65px;
    overflow: hidden;
    padding: 0;
    background:#0000FF;
    line-height:65px;
    color:#FFF;
    padding:0 5px;
}

Answer 2

您是否想完成這樣的事情？

您可以使用<ul> top: 50%; <ul>絕對將<ul>放置在屏幕中間top: 50%; 只要將margin-top設置為<ul>高度的一半的負數即可。 例如，如果<ul>高度為100px ，則需要設置margin-top: -50px; top: 50%; position: absolute; top: 50%; position: absolute; 為了使<ul>垂直垂直居中放置在屏幕中央。

如果您事先不知道<ul>的高度，那么我添加了一些jQuery來確定高度並相應地調整邊距頂部。 您可以在jsFiddle上更改<div>容器的高度，以查看<ul>將垂直居中，而與容器的高度無關。

http://jsfiddle.net/kreCe/1/

Answer 3

僅就FYI而言，解決方案位於display：block-inline。 ：） 感謝你的幫助