内容在溢出时对齐

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

您必须为li分配宽度：

ul.standard-list li{
  list-style-type: none;
  line-height:28px;
  text-align: justify;
  width: 250px;
}

完整代码：

＆＃13;

＆＃13;

   .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;
  text-align: justify;
  width: 250px;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

当文本内容太长时，

元素将占用100％的宽度

也许您可以为列表项设置最大宽度

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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