Html 如何使用css将ul列表居中？_Html_Css_Html Lists

Html 如何使用css将ul列表居中？

html css

Html 如何使用css将ul列表居中？,html,css,html-lists,Html,Css,Html Lists,我一直在混乱的CSS，但不能得到想要的结果我用html中的url和缩略图制作了一个简单的列表，并用CSS设置了样式我无法将列表放在页面中央。我希望它从两边都是均匀的，但更多的是在页面的右边有人能帮我解决这个问题吗 CSS body { background-color: #151924; } ul#playlist { text-align: center; } ul#playlist li { display:block; list-style: none;

我一直在混乱的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
}

播放列表测试

#播放列表

ul inherit 50px左填充（可用于隐藏的li项目符号）

您必须将其重置为

#playlist{padding 0；}

或添加padding值，以使内容

#playlist{padding 0 50px；}

居中

更新的小提琴：

你有没有看过和？

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

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