aligner et centrer element css html

<nav class="navigation">
          <div>
            <ul>
                <li class=item_1>FindThePrecious.com</li>
                <li class=item_2>Fellows</li>
                <li class=item_3>Contact us</li>
            </ul>
          </div>
        </nav>

.navigation{
  width: 100%;
  height: 1.8em;
  
}

li {
  display: inline;
  padding:5px;
  
}
////////////////////////////////////////////////////
 <section>
 <div class = "portrait">
          <img class="demo_portrait_1"
     src="https://via.placeholder.com/150" alt="portrait"> 
           <img class="demo_portrait_1"
     src="https://via.placeholder.com/150" alt="portrait_demo"> 
          <img class="demo_portrait_1"
     src="https://via.placeholder.com/150" alt="portrait_demo">
            </div>
</section>
                   //////// css///////////
.portrait{
text-align: center;
}

.demo_portrait_1{ 
  padding:10px;
  height: 400px;
  width: 400px;     
}