如何用css居中ul列表？

我一直在搞CSS，但不能得到理想的結果。如何用css居中ul列表？

我做了一個簡單的列表與網址&在HTML中的縮略圖和CSS樣式。

我無法進入頁面中心列表。我希望它從雙方都是平衡的，但它更多地位於頁面的右側。

有人可以幫我解決這個問題。

CSS

body { 
background-color: #151924; 
} 
ul#playlist 
{ 
text-align: center; 
} 
ul#playlist li 
{ 
    display:block; 
    list-style: none; 
    background: #323B55; 
    border: 1px solid #b2b2b2; 
    max-width: 100%; 
    margin-top: 5px 
} 
ul#playlist li img 
{ 
    float: left; 
    margin: 15px 15px 15px 15px; 
} 
ul#playlist h3 
{ 
    font: bold 20px/1.5 Helvetica, Verdana, sans-serif; 
} 

ul#playlist li a 
{ 
    font-weight: bold; 
    line-height: 2.8em; 
    margin-left: 50px; 
    color: #b2b2b2 
}

<title>Playlist test</title> 
    <body> <ul style="list-style-type:none" id="playlist"> 
<li><a href="http://hls01-09.az.myvideo.az/hls-live/livepkgr/foxturk/foxturk/foxturk.m3u8?mfamwuUL6IpOXDJ8WwxJ"> 
    <img src="https://c1.staticflickr.com/3/2790/5864018592_65d4a0a298.jpg"> 
    <h3>Star TV</h3> 
    <p>Lorem ipsum dolor sit amet...</p></li> 
<li>  <a href="http://hls01-09.az.myvideo.az/hls-live/livepkgr/foxturk/foxturk/foxturk.m3u8?mfamwuUL6IpOXDJ8WwxJ"> 
    <img src="https://c1.staticflickr.com/3/2790/5864018592_65d4a0a298.jpg"> 
    <h3>Star TV</h3> 
    <p>Lorem ipsum dolor sit amet...</p></a></li> 
<li>  <a href="http://hls01-09.az.myvideo.az/hls-live/livepkgr/foxturk/foxturk/foxturk.m3u8?mfamwuUL6IpOXDJ8WwxJ"> 
    <img src="https://c1.staticflickr.com/3/2790/5864018592_65d4a0a298.jpg"> 
    <h3>Star TV</h3> 
    <p>Lorem ipsum dolor sit amet...</p></a></li> 
<li>  <a href="http://hls01-09.az.myvideo.az/hls-live/livepkgr/foxturk/foxturk/foxturk.m3u8?mfamwuUL6IpOXDJ8WwxJ"> 
    <img src="https://c1.staticflickr.com/3/2790/5864018592_65d4a0a298.jpg"> 
    <h3>Star TV</h3> 
    <p>Lorem ipsum dolor sit amet...</p></a></li> 
<li>  <a href="http://hls01-09.az.myvideo.az/hls-live/livepkgr/foxturk/foxturk/foxturk.m3u8?mfamwuUL6IpOXDJ8WwxJ"> 
    <img src="https://c1.staticflickr.com/3/2790/5864018592_65d4a0a298.jpg"> 
    <h3>Star TV</h3> 
    <p>Lorem ipsum dolor sit amet...</p></a></li> 
<li>  <a href="http://hls01-09.az.myvideo.az/hls-live/livepkgr/foxturk/foxturk/foxturk.m3u8?mfamwuUL6IpOXDJ8WwxJ"> 
    <img src="https://c1.staticflickr.com/3/2790/5864018592_65d4a0a298.jpg"> 
    <h3>Star TV</h3> 
    <p>Lorem ipsum dolor sit amet...</p></a></li> 
<li>  <a href="http://hls01-09.az.myvideo.az/hls-live/livepkgr/foxturk/foxturk/foxturk.m3u8?mfamwuUL6IpOXDJ8WwxJ"> 
    <img src="https://c1.staticflickr.com/3/2790/5864018592_65d4a0a298.jpg"> 
    <h3>Star TV</h3> 
    <p>Lorem ipsum dolor sit amet...</p></a></li> 





    </ul> </body>

http://jsfiddle.net/7yos5231/

來源

2014-10-06 user2033139

以任何機會，你有看了一下http://stackoverflow.com/questions/1695175/how-to-horizontally-center-an-unordered-list-未知寬度和http://stackoverflow.com/questions/19443013/how-to-center-an-unordered-list？ – 2014-10-06 07:39:14

#playlist UL繼承50px的左填充（可用於隱藏裏的子彈）。

您必須重置它#playlist { padding 0; }或添加填充值您需要等於中心內容#playlist { padding 0 50px; }。

更新後的提琴：http://jsfiddle.net/7yos5231/5/

來源

2014-10-06 07:42:35 emmanuel

ul#playlist 
{ 
    text-align: center; 
    margin: 0 auto; 
    padding : 0 20px;/* change to the value you desire.*/ 
}

來源

2014-10-06 08:04:30 BLUEPIXY

如何用css居中ul列表？

回答

相關問題