html - 内容溢出时左对齐

Question

我试图让这些元素符号列表都从中心开始。我注意到，当文本的长度超过浏览器窗口的宽度时，元素符号点会对齐到页面的左侧。为什么会这样，我怎样才能让它居中对齐？这是一个溢出问题吗？我不知道如何解决这个问题。

感谢您的帮助，谢谢。

.standard-list-wrap{
    padding-top: 25px;
    display: flex;
	justify-content: center;
	align-items: center;
}

ul.standard-list{
	padding:0px 0 50px 00000;
	margin:0;
	text-align:left;
	color:#000;
	font-weight:100;
	font-family:Montserrat, Helvetica, Arial, sans-serif;
	font-size:20px;
	-webkit-font-smoothing: antialiased; /* subtley makes fonts smoother */
	line-height:28px;
}

ul.standard-list li{
	list-style-type: none;
	line-height:28px;
}
ul.standard-list li:before{
    /* Unicode bullet symbol */
    content: '\2022';
    /* Bullet color */
    color: #f0f;
    padding-right: 10px;
}

<div class="standard-list-wrap">
        
<ul class="standard-list">
          <li>shorter text is no problem</li>
          <li>shorter text is no problem</li>
    </ul>
        
    </div>
    
    
    
    <div class="standard-list-wrap">
        
<ul class="standard-list">
          <li>but when the text gets too long the problem occurs because the div is no longer centralised and list floats to the left of the page - i want the bullet points to be centralised like the above</li>
    </ul>
        
    </div>

Answer 1

当文本内容太长时，元素将占用 100% 的宽度

也许你可以为你的列表项设置一个最大宽度

.standard-list-wrap {
    padding-top: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
}

ul.standard-list {
    padding: 0px 0 50px 00000;
    margin: 0;
    text-align: left;
    color: #000;
    font-weight: 100;
    font-family: Montserrat, Helvetica, Arial, sans-serif;
    font-size: 20px;
    -webkit-font-smoothing: antialiased;
    /* subtley makes fonts smoother */
    line-height: 28px;
}

ul.standard-list li {
    list-style-type: none;
    line-height: 28px;
    max-width: 400px;
    margin: auto;
}

ul.standard-list li:before {
    /* Unicode bullet symbol */
    content: '\2022';
    /* Bullet color */
    color: #f0f;
    padding-right: 10px;
}

<div class="standard-list-wrap">

    <ul class="standard-list">
        <li>shorter text is no problem</li>
        <li>shorter text is no problem</li>
    </ul>

</div>



<div class="standard-list-wrap">

    <ul class="standard-list">
        <li>but when the text gets too long the problem occurs because the div is no longer centralised and list floats to the left of the page - i want the bullet points to be centralised like the above</li>
    </ul>

</div>

:

ul.standard-list li{
    list-style-type: none;
    line-height:28px;
    max-width: 400px;
    margin: auto;
}