Texts in a ul li that are in display flex are not centered

January 8, 2023

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

Why are the sels not centered? It may be due to display flex, but all except the li are centered. I also give text align center to a tags, but it still didn’t work. Thank you in advance for your help

>Solution :

Try this and let me know

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