居中问题

Posted 2020-11-19 hongyaxi

li{

    border:solid red;

    text-align:center;

}

li{

    border:solid red;

    margin：0 auto；

}

这里的text-align：center和margin：0 auto为什么都不会起作用？

li是块级元素，满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。你的li没有指定宽度。不是定宽是不能用这种方式居中的。因为不知道你整个元素有多宽，它居中往哪里居呢？

不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多）：

加入 table 标签，将需要居中的内容放在表格中，再将表格设置为居中显示。

设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置

设置 position:relative 和 left:50%：利用 相对定位 的方式，将父元素向左偏移 50% ，子元素向右偏移50%，即达到将子元素居中的目的。