Search code examples
cssdisplaytext-align

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


.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> [email protected] </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> [email protected] </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;
    }