如何用css将ul列表居中？答案

【问题标题】：How to center ul list with css?如何用css将ul列表居中？
【发布时间】：2014-11-30 10:43:00
【问题描述】：

我一直在搞乱 CSS，但无法得到想要的结果。

我用 html 中的 url 和缩略图制作了简单的列表，并用 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/

【问题讨论】：

你有没有看过stackoverflow.com/questions/1695175/…和stackoverflow.com/questions/19443013/…？

标签： html css html-lists

【解决方案1】：

#playlistul 继承 50px left padding（可用于隐藏的 li 子弹）。

您必须重置它#playlist { padding 0; } 或添加您需要的 padding 值以使内容居中#playlist { padding 0 50px; }。

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

【讨论】：

【解决方案2】：

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

【讨论】：