如何使用 CSS 将 li 标签居中

Question

我在一个网站上工作，想创建一个包含嵌入图片作为链接的自定义列表。 Here 是网站的链接：

我希望链接根据浏览器大小重新排列左对齐，并根据浏览器大小调整图片大小。

我正在让它根据浏览器大小重新调整大小，但在我的一生中，我无法让产品以移动设备和某些浏览器大小为中心。

这是我目前使用的 HTML/CSS。

提前感谢您的帮助。

HTML：

<div class="home-page">
<ul class="tile">
<li id="one"><a href="http://google.com"><img src="http://www.skyvueranchalpacas.com/wp-content/uploads/2015/03/Alpaca-Test.jpg" alt="" /></a></li>
<li id="two"><a href="http://google.com"><img src="http://www.skyvueranchalpacas.com/wp-content/uploads/2015/03/Alpaca-Test.jpg" alt="" /></a></li>
<li id="three"><a href="http://google.com"><img src="http://www.skyvueranchalpacas.com/wp-content/uploads/2015/03/Alpaca-Test.jpg" alt="" /></a></li>
<li id="four"><a href="http://google.com"><img src="http://www.skyvueranchalpacas.com/wp-content/uploads/2015/03/Alpaca-Test.jpg" alt="" /></a></li>

CSS：

/* Home page Tiles
*/

/* tiles as a whole */

.post-475 page type-page status-publish entry{
}

div.home-page{
margin: 0 auto;
padding: 0;
text-align:center;
}

.tile{
    float: left;
position: relative;
display: block;
text-align: center;
background: none;
font-size: 20px;
border-right: 1px solid #fff;
margin-top: 8px;
margin-left: -40px;
line-height: 1em;
padding-left: 10px;

}
/* indavidual list */
.tile li{
position: relative;
display: inline-block;
text-align: center;
background: none;
font-size: 20px;
line-height: 60px;
padding:0 10px;

}
/* List Picture (before click) */
.tile li img {
max-width: 22em;
width: 100%;
height: auto;

}

Answer 1

您可以将<li>s 集中在CSS 中的.entry-content ul 中。只需将其替换为以下给定的即可。

.entry-content ul {
  display: inline-block;
  text-align: center;
}

Answer 2

试试这个：

.tile{
   /* float: left;*/
position: relative;
display: block;
text-align: center;
background: none;
font-size: 20px;
border-right: 1px solid #fff;
margin-top: 8px;
margin-left: -40px;
line-height: 1em;
padding-left: 10px;

}
/* indavidual list */
li{
position: relative;
display: inline-block;
text-align: center;
background: none;
font-size: 20px;
line-height: 60px;
padding:0 10px;

使用li 而不是.title li。此外，float:left; 声明可能会否定 text-align:center; 之一。

Answer 3

您的<div class="home-page"> 有一个margin-left: 20%，导致列表不居中。使用媒体查询来解决这个问题：

@media screen and (max-width: 40em){
    div.home-page{
    margin-left: 0;
    }
}

我没有对此进行大量测试，但它为我解决了这个问题。

祝你好运！