时间戳

首页 > 解决方案 > 如何将列表中心与 html & css 对齐？

html - 如何将列表中心与 html & css 对齐？

问题描述

我在尝试将列表与页面中心对齐以使其与我的其余内容匹配时遇到问题。我尝试了其他方法，但它要么不起作用，要么向右对齐。

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

标签： htmlcss

解决方案

您可以尝试将列表包装在 div 元素中并使其居中。请参阅 w3schools 关于CSS 边距的文章。

<style>
.center {
margin: 30px auto;
}

p {
text-align: center;
}

ul {
margin: 0 auto;                  
width: 150px;
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;
}
</style>
<div class="center">
    <p>Digital Media:</p>
        <ul>
            <li>Tablet</li>
            <li>Tablet Pen</li>
            <li>Phone + my finger</li>
        </ul>

    <p>Tradtional Media:</p>
        <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>

推荐阅读