顯示 flex 中的 ul li 中的文本未居中

Question

.contact-information-container {
    width: 40%;
    margin: 0 20px;
}

.contact-information {
    display: flex;
    text-align: center;
    flex-direction: column;
    margin-bottom: 70px;
}

.contact-information li{
    padding: 0 10px;
    float: left;
        text-align: center;
}

<div class="contact-information-container reveal">      
              
<div class="contact-information">
  <div class="information-header"> <h5>Email</h5> </div> 
  <h6> creative@portfolio.com </h6>
  <h6> Tel. +86 894 680 38 </h6>
</div>  
              
<div class="contact-information"> 
  <div class="information-header"> <h5>Social Media</h5> </div> 
  <ul>  
    <li><a href="#">Instagram</a></li>
    <li><a href="#">Instagram</a></li>
    <li><a href="#">Instagram</a></li>
    <li><a href="#">Instagram</a></li>
    <li><a href="#">Instagram</a></li>
    <li><a href="#">Instagram</a></li>
   </ul>
</div>
              
<div class="contact-information"> 
  <div class="information-header"> <h5>Email</h5> </div> 
  <adress>
    <h6>125-149 W San Fernando St,<br> San Jose, CA 95113,</h6>              
  </adress>
  </div>    
</div>  

為什么 sels 不居中？ 這可能是由於顯示彎曲，但除了 li 之外的所有內容都居中。 我也給一個標簽文本居中對齊，但它仍然沒有用。 預先感謝您的幫助

Answer 1

試試這個讓我知道

<div class="contact-information-container reveal">      
          
<div class="contact-information">
  <div class="information-header"> <h5>Email</h5> </div> 
  <h6> creative@portfolio.com </h6>
  <h6> Tel. +86 894 680 38 </h6>
</div>  
          
<div class="contact-information"> 
  <h5>Social Media</h5>
  <ul>  
    <li><a href="#">Instagram</a></li>
    <li><a href="#">Instagram</a></li>
    <li><a href="#">Instagram</a></li>
    <li><a href="#">Instagram</a></li>
    <li><a href="#">Instagram</a></li>
    <li><a href="#">Instagram</a></li>
   </ul>
</div>           
<div class="contact-information"> 
  <div class="information-header"> <h5>Email</h5> </div> 
     <adress>
       <h6>125-149 W San Fernando St,<br> San Jose, CA 95113,</h6>              
     </adress>
  </div>    
</div>  


.contact-information-container {
    width: 40%;
    margin: 0 20px;
}

.contact-information {
    display: flex;
    text-align: center;
    justify-content:center;
    flex-direction: column;
    margin-bottom: 70px;
}
.contact-information ul {
    display:flex;
    flex-direction:row;
    justify-content:center;
    gap:25px;
    padding:0px;
}
.contact-information ul li {
    list-style:none;
}