如何用css中心ul列表？
[英]How to center ul list with css?
问题描述
i have been messing with CSS but cant get desired results. 
我一直在搞乱CSS，但无法获得理想的结果。
I made simple list with url & thumbnails in html and styled it with CSS. 我在html中用url和缩略图制作了简单的列表，并用CSS设置了它。
I cant get list into center of page. 我无法将列表放入页面中心。 I want it to be even from both sides, but its more on the right side of page. 我希望它甚至可以来自双方，但更多的是在页面的右侧。
Can someone help me with this issue please. 有人可以帮我解决这个问题。
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>
2 个解决方案
解决方案1
2 2014-10-06 07:42:35
#playlist ul inherit 50px left padding (available for the hidden li bullets). #playlist ul继承50px 左边填充 （可用于隐藏的li子弹）。
You have to reset it #playlist { padding 0; } 你必须重置它#playlist { padding 0; } #playlist { padding 0; } or add the padding value you need to equal center the content #playlist { padding 0 50px; } #playlist { padding 0; }或添加需要等于中心内容的填补值#playlist { padding 0 50px; } #playlist { padding 0 50px; } . #playlist { padding 0 50px; } 。
Updated fiddle: http://jsfiddle.net/7yos5231/5/ 更新小提琴： http ： //jsfiddle.net/7yos5231/5/
解决方案2
1 2014-10-06 08:04:30
ul#playlist
{
text-align: center;
margin: 0 auto;
padding : 0 20px;/* change to the value you desire.*/
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.