Navigation bar made of images

I have five different images being used as buttons for my website's navigation. I want them to be inline horizontally and centred in the browser window. They looked fine until I added code to have text appear under each button when hovering over each image. The buttons are now all aligned vertically in the middle of the window.

In html file:

   <div class="nav">
        <div class="container">
            <ul>
            <div class="about">
            <li><input type="image" src="image.png" id="aboutPage" onClick = 'aboutPage()'/></li>
            <p class = "text1"> About </p>
            </div>

            <div class="resume">
            <li><input type="image" src="image.png" id="resumePage" onClick = 'resumePage()'/></li>
            <p class = "text2"> Resume </p>
            </div>

            <div class="home">
            <li><input type="image" src="image.png" id="homePage" onClick = 'homePage()'/></li>
            <p class = "text3"> Home </p>
            </div>

            <div class="portfolio">
            <li><input type="image" src="image.png" id="portfolioPage" onClick = 'portfolioPage()'/></li>
            <p class = "text4"> Portfolio </p>
            </div>

            <div class="contact">
            <li><input type="image" src="image.png" id="contactPage" onClick = 'contactPage()'/></li>
            <p class = "text5"> Contact </p>
            </div>
        </ul>
        </div>

In CSS file:

.nav {
  position: absolute;
  bottom: 0%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.nav .container {
   font-size: 12px;
  font-family: 'Shift', sans-serif;
  color: #5a5a5a;
  font-weight: lighter;
}

.nav .container ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.nav .container li {
  display: inline;
}

The following is a sample of the hover code for each image:

.nav .container .about .text1 {
   position:relative;
   bottom:0px;
   text-align: center;
   visibility: hidden;
}

.nav .container .about:hover .text1{
   visibility: visible;
}

Any help would be much appreciated! Thank you.