我如何在html中对列表进行居中？
我如何在html中对列表进行居中？
提问于 2020-10-12 11:25:06
这是我的网站https://acanhs.org/nhs-articles.html，我想把列表的中心放在中间，这样看起来更好看。我怎么能这么做？我试过使用<center>标签，但没有成功。我想把名字和日期放在文章名称下面，使它看起来更好看。
这是我的html：
a:link {
color: Black;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: Black;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: Black;
background-color: transparent;
text-decoration: none;
}
a:active {
color: Black;
background-color: transparent;
text-decoration: none;
}<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap" rel="stylesheet">
<meta charset="utf-8">
<title>ACA NHS</title>
<link rel="stylesheet" href="stylesheet.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<center>
<section class="blog-posts grid-system">
<div class="container">
<div class="row">
<div class="col-12">
<div class="all-blog-posts">
<center>
<div class="row">
<div class="col-lg-4">
<div class="blog-post">
<div class="blog-thumb"><img src="assets/images/blog-thumb-01.jpg" alt=""></div>
<div class="down-content">
<h4>الأمير الراحل … أمير الإنسانية</h4>
<ul class="post-info">
<li>Mohammad Al-Obaidi</li><br>
<li>3/10/2020</li>
</ul>
<div class="btn download" onclick="window.location='articlepdfs/الأمير الراحل … أمير الإنسانية.pdf';">
<div class="cloud">
<div class="arrow"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="blog-post">
<div class="blog-thumb"><img src="assets/images/blog-thumb-02.jpg" alt=""></div>
<div class="down-content">
<h4>Uyghur Muslims</h4>
<ul class="post-info">
<li>Khalid Kooheji</li><br>
<li>27/9/2020</li>
</ul>
<div class="btn download" onclick="window.location='articlepdfs/Uyghur Muslims.pdf';">
<div class="cloud">
<div class="arrow"></div>
</div>
</div>
<div class="post-options">
<div class="row"></div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="blog-post">
<div class="blog-thumb"><img src="assets/images/blog-thumb-02.jpg" alt=""></div>
<div class="down-content" onclick="window.location='articlepdfs/Corona Virus A New World.pdf';">
<h4>Corona Virus: A New World</h4>
<ul class="post-info">
<li>Majed Al-Shaheen</li><br>
<li>27/9/2020</li>
</ul>
<div class="btn download">
<div class="cloud">
<div class="arrow"></div>
</div>
</div>
<div class="post-options">
<div class="row"></div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="blog-post">
<div class="blog-thumb"><img src="assets/images/blog-thumb-03.jpg" alt=""></div>
<div class="down-content">
<h4>التعلم عبادة</h4>
<ul class="post-info">
<li>Omar Sheir</li><br>
<li>23/9/2020</li>
</ul>
<div class="btn download" onclick="window.location='articlepdfs/التعلم عبادة.pdf';">
<div class="cloud">
<div class="arrow"></div>
</div>
</div>
<div class="post-options">
<div class="row"></div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="blog-post">
<div class="blog-thumb"><img src="assets/images/blog-thumb-04.jpg" alt=""></div>
<div class="down-content">
<h4>الصدقة</h4>
<ul class="post-info">
<li>Ahmad Al-Mazrouei</li><br>
<li>20/9/2020</li>
</ul>
<div class="btn download" onclick="window.location='articlepdfs/الصدقة.pdf';">
<div class="cloud">
<div class="arrow"></div>
</div>
</div>
<div class="post-options">
<div class="row"></div>
</div>
</div>
</div>
</div>
</div>
</center>
</div>
</div>
</div>
</div>
</section>
</center>
</body>
</html>
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-10-12 11:44:44
生成内容的方式会给您带来一些麻烦，以及每个float: left的<li>。
解决方案1:以不同方式生成
这可能是不可行的，但如果您只把它放在一个标签中(例如<p>Name | Date</p>)，那么它将解决您的问题。
解决方案2:显示内联块
我已经删除了您对li元素的所有样式。我唯一的规则是：
li{
display: inline-block;
}
.blog-posts .down-content ul.post-info li:after {
content: '|';
color: #aaa;
margin-left: 8px;
}这会将两个li标记放在相同的行上，但不会让您遇到任何float问题。因为内容已经以中心为中心，所以文本也是居中的。您确实设置了此设置，但是在第81行的stylesheet.css中，您正在重写这个！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64316932
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号