我在尝试将我的列表与我的页面中心对齐时遇到问题,以便它与我的其余内容相匹配。我尝试过其他方法,但它要么不起作用,要么与右边对齐。
HTML:
<p>Digital Media:</p>
<div id="list">
<ul>
<li>Tablet</li>
<li>Tablet Pen</li>
<li>Phone + my finger</li>
</ul>
</div>
<p>Tradtional Media:</p>
<div id="list">
<ul>
<li>Notebook</li>
<li>Pens</li>
<li>Pencils</li>
<li>Colored Pencils</li>
<li>Fine-Tip Markers</li>
<li>Canvas</li>
<li>Watercolor Paint</li>
<li>Acrylic Paint</li>
<li>Various-Sized Paintbrushes</li>
</ul>
</div>
CSS:
ul {
margin: 0 auto;
width: 1200px;
padding-left: 0;
font-size: 0;
justify-content: center;
}
li {
font-size: 18px;
list-style-type: none;
width: 150px;
height: 50px;
line-height: 50px;
margin: 15px 25px;
box-sizing: border-box;
text-align: center;
}
您可以更改代码:
li {
...
margin: 15px auto;
...
}
并且在一个页面中,不要有多个具有相同 ID 的元素
<div id="list">
=> <div class="list">
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句