vertical align image, text, image within a div in css - css

Question

I have defined a Div which is 100% wide and 380 px in height. Within this Div, I want to display an image, text, and an image right in the middle and center.
I tried using this code -
<div id="mainContent">
<div class="wrapper">
<div class="centered">
<img class="g1" src="http://www.google.com/favicon.ico" height="64" width="64"/>
<div class="text1">
some random text I want to put in the middle
</div>
<img class="g2" src="http://www.google.com/favicon.ico" height="164" width="164"/>
</div>
</div>
</div>
and the related CSS is
#mainContent {
background-color: #10AEEF;
margin: 0px auto;
border: 0px solid #000000;
width:100%;
height:380px;
text-align:center;
}
.wrapper {
text-align:center;
border:0px solid #00FF00;
}
.wrapper:before {
content:'';
height:100%;
display: inline-block;
vertical-align:middle;
}
.centered {
display: inline-block;
vertical-align:middle;
}
.g1 {
margin: 0px auto;
border: 0px solid #0000FF;
float:left;
}
.text1 {
margin: 0px auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 44px;
color: #FFFFFF;
border: 0px solid #FF0000;
width:50%;
float:left;
}
.g2 {
margin: 0px auto;
border: 0px solid #0000FF;
float:left;
}
I am trying to avoid using a table to display this. But I want the centered class to be in the middle and center and within that g1 in the middle, text1 in the middle, and g2 in the middle.
Right now all are floating to left. But when I take it out, they are are aligned one on top of the other but in the middle. I think I am missing something basic.

Answer 1

If I understand your question correctly and you want both images and the text centred one on top of another then this is (I think) all you need:
#mainContent{
background-color:#10AEEF;
height:380px;
text-align:center;
}
Note that you specify things like border:0px solid #000000;. Essentially what you are doing is already specifying what is default, you don't need them.
EDIT
This is the code needed to center everything both vertically and horizontally:
<div id="mainContent">
<div class="centered">
<img class="g1" src="http://www.google.com/favicon.ico" height="64" width="64"/>
<div class="text1"><p>Some text here...</p></div>
<img class="g2" src="http://www.google.com/favicon.ico" height="164" width="164"/>
</div>
</div>
And the css
#mainContent{
background-color: #10AEEF;
width:100%;
height:380px;
text-align:center;
position:absolute;
}
.centered{
position:relative;
top:50%;
transform: translateY(-50%);
}
Note: If you want to keep the wrapper div make sure you change the css from .centered to .wrapper