Perhaps you're looking for something like this: JSFiddle?
By adding
position:relative
to your container I was then able to specify individual positioning for the child elements, which then allowed me to center the text responsively. Please let me know if this wasn't what you were looking for.
.port_nav {
background-color:rgba(255,255,255,0.3);
width:80%;
margin: 88px auto 0 auto;
height:80%;
position: relative;
}
And the individual images (added a span to make selection less problematic):
.port_nav .item .image {
position: relative;
width:30%;
float:left;
height:100%;
background-color:rgba(255,255,255,0.3);
}
.port_nav .item .image span {
position: absolute;
width: 100%;
text-align:center;
}