在网页的排版中,有时候我们需要给无序列表 (``) 的项目 ( `` ) 中的文字进行居中处理。然而,如果直接对 `` 元素应用 `text-align: center` 样式,会导致列表中的所有元素
css ul { display: flex; }然后,设置 `justify-content` 属性为 `center`,这将会使 `
css ul { display: flex; justify-content: center; }接下来,再设置 `text-align` 属性为 `left`,这将使 `
css ul { display: flex; justify-content: center; text-align: left; }最后,我们再在 `
css ul { display: flex; justify-content: center; text-align: left; } li { margin: 0 10px; }这样,我们就成功地将无序列表中的文字居中对齐,同时又左对齐了。 参考代码如下:
html <p>HTML 代码:</p> <pre> <ul> <li>列表项 1</li> <li>列表项 2</li> <li>列表项 3</li> </ul>
CSS 代码:
ul { display: flex; justify-content: center; text-align: left; } li { margin: 0 10px; }
粉丝
0
关注
0
收藏
0