如何将列表中心与 html 和 css 对齐?

Kaiju

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

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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何将按钮与html和CSS对齐?

来自分类Dev

将 <iframe> 标签对齐到 HTML 和 CSS 的中心

来自分类Dev

CSS:HTML将表单中心对齐,但将Labels和Legend对齐在左侧

来自分类Dev

如何将css表对齐中心

来自分类Dev

将按钮与Rails代码,css和html对齐

来自分类Dev

将按钮与Rails代码,css和html对齐

来自分类Dev

如何使用HTML和CSS居中对齐社交媒体标签

来自分类Dev

如何在 HTML 和 CSS 中对齐单选按钮文本?

来自分类Dev

HTML/CSS:如何将指向另一个网站的链接与网页中心对齐 --> 尝试在 CSS 中将链接对齐到中心...没有用

来自分类Dev

使用跨度,文本对齐和内联块,CSS,HTML将文本左,中,右对齐

来自分类Dev

对齐中心CSS和After CSS

来自分类Dev

HTML/CSS 如何将 div 与 4 个文本框对齐,包括 h1、p 和 pictrues

来自分类Dev

如何将标签和输入与CSS对齐

来自分类Dev

如何对齐链接HTML / CSS

来自分类Dev

HTML / CSS:如何将文本的边框与图像对齐?

来自分类Dev

如何将标头项目与HTML和SCSS对齐

来自分类Dev

如何左右对齐HTML和CSS中的每个备用列表项以及项目符号

来自分类Dev

CSS:如何将文本对齐到图像的中心(左侧)

来自分类Dev

如何将项目与flex容器的起点和中心对齐?

来自分类Dev

如何在html / css中的页面中心对齐表格

来自分类Dev

如何使用HTML5和CSS3垂直居中对齐并对齐其他所有内容?

来自分类Dev

html CSS垂直列表对齐顶部

来自分类Dev

将标题/标题与文本 HTML、CSS 对齐

来自分类Dev

如何使用 CSS 和 HTML 对齐导航标题中的文本?

来自分类Dev

如何在 CSS 和 HTML 中对齐垂直文本框?

来自分类Dev

如何在HTML CSS中对齐div

来自分类Dev

在 HTML 和 CSS 中,图像左对齐,文本和标题右对齐

来自分类Dev

UL在模板页脚中对齐(HTML和CSS)

来自分类Dev

在页脚HTML和CSS中将水平对齐的图像居中

Related 相关文章

  1. 1

    如何将按钮与html和CSS对齐?

  2. 2

    将 <iframe> 标签对齐到 HTML 和 CSS 的中心

  3. 3

    CSS:HTML将表单中心对齐,但将Labels和Legend对齐在左侧

  4. 4

    如何将css表对齐中心

  5. 5

    将按钮与Rails代码,css和html对齐

  6. 6

    将按钮与Rails代码,css和html对齐

  7. 7

    如何使用HTML和CSS居中对齐社交媒体标签

  8. 8

    如何在 HTML 和 CSS 中对齐单选按钮文本?

  9. 9

    HTML/CSS:如何将指向另一个网站的链接与网页中心对齐 --> 尝试在 CSS 中将链接对齐到中心...没有用

  10. 10

    使用跨度,文本对齐和内联块,CSS,HTML将文本左,中,右对齐

  11. 11

    对齐中心CSS和After CSS

  12. 12

    HTML/CSS 如何将 div 与 4 个文本框对齐,包括 h1、p 和 pictrues

  13. 13

    如何将标签和输入与CSS对齐

  14. 14

    如何对齐链接HTML / CSS

  15. 15

    HTML / CSS:如何将文本的边框与图像对齐?

  16. 16

    如何将标头项目与HTML和SCSS对齐

  17. 17

    如何左右对齐HTML和CSS中的每个备用列表项以及项目符号

  18. 18

    CSS:如何将文本对齐到图像的中心(左侧)

  19. 19

    如何将项目与flex容器的起点和中心对齐?

  20. 20

    如何在html / css中的页面中心对齐表格

  21. 21

    如何使用HTML5和CSS3垂直居中对齐并对齐其他所有内容?

  22. 22

    html CSS垂直列表对齐顶部

  23. 23

    将标题/标题与文本 HTML、CSS 对齐

  24. 24

    如何使用 CSS 和 HTML 对齐导航标题中的文本?

  25. 25

    如何在 CSS 和 HTML 中对齐垂直文本框?

  26. 26

    如何在HTML CSS中对齐div

  27. 27

    在 HTML 和 CSS 中,图像左对齐,文本和标题右对齐

  28. 28

    UL在模板页脚中对齐(HTML和CSS)

  29. 29

    在页脚HTML和CSS中将水平对齐的图像居中

热门标签

归档