Centering texts inside div using Flex

Issue

I am trying to split the div "Info" into three sections to evenly divide the sections. I think I did that correctly to begin, but I am having issues centering the titles (Address, Hours, Contact) from their own divs. The example below is how I'm trying to make it look. Thank you for your time.

Example

.info{
  display: flex;
  justify-content: space-between;
}

<div class="info">
      <div class="left-info">
        <div class="address-title">
          Address
        </div>
        <div class="address">
          1111 Some Words, Tampa, FL 33647, United States
        </div>
      </div>
      <div class="middle-info">
        <div class="hours-title">
          Hours
        </div>
        <div class="hours">
          Mon-Fri
        </div>
      </div>
      <div class="right-info">
        <div class="contact-title">
          Contact
        </div>
        <div class="contact">
          111-111-1111
        </div>
      </div>
    </div>

Solution

Try this one. I've given width: 33% to each div inside .info in order to divide the entire width into three equal width. In addition, gave text-align: center to individual divs.

.info {
  display: flex;
  justify-content: space-between;
}

.left-info,
.right-info,
.middle-info {
 width: 33%;
 text-align: center;
}

<div class="info">
  <div class="left-info">
    <div class="address-title">
      Address
    </div>
    <div class="address">
      1111 Some Words, Tampa, FL 33647, United States
    </div>
  </div>
  <div class="middle-info">
    <div class="hours-title">
      Hours
    </div>
    <div class="hours">
      Mon-Fri
    </div>
  </div>
  <div class="right-info">
    <div class="contact-title">
      Contact
    </div>
    <div class="contact">
      111-111-1111
    </div>
  </div>
</div>

I hope this helps you.

Answered By - Sachin Som