Centering image and text within a div - image

Question

In my asp.net mvc4 view I have some nested divs to show an image and under it a text like below:
<div id="Outer1" class="elementStatus">
<div class="image"> <!-- THIS IS THE IMAGE -->
<img id="MyImg1" src="#Url.Content("~/images/Image.gif")">
</div>
<div class="text"> <!-- THIS SHOWN THE TEXT UNDER IMAGE-->
Statuts Text
</div>
</div>
and the css:
.elementStatus
{
visibility: hidden;
}
.image{
float: left;
margin-top: 2px;
padding-top: 1px;
padding-left: 10px;
width: 35px;
}
.text{
float: left;
margin-top: 1px;
padding-left: 14px;
padding-bottom: 2px;
width: 35%;
font-weight: bold;
font-size: 1em;
}
I want that the image in the first div to be centered horizontally and vertically in the div where it is placed. The same for the second div, I want the text to be centered horizontally and vertically within its div. So how to do it?
Please, do not downvote!

Answer 1

Recommend a background image:
.image {
background-image: url('~/images/Image.gif');
background-repeat: no-repeat;
background-position: center;
background-size: 35px 35px;
}
For the text:
.text {
text-align: center;
}
For vertical text alignment:
.text {
line-height: 35px;
height: 35px;
}

Answer 2

This is a pretty broad question but it's easily solved using flexbox (assuming you're supporting newer browsers). Going to remove vendor prefixes for the sake of clarity but you'll want something like this:
#Outer1 {
display: box;
box-align: center;
box-orient: vertical;
box-pack: center;
}
http://jsfiddle.net/VqwLH/
Since you have updated saying you need support for older browsers, I think you can use display: table-cell for the parent container:
#Outer1 {
display: table-cell;
height: 500px;
width: 500px;
border: 1px solid red;
vertical-align: middle;
text-align: center;
}
http://jsfiddle.net/VqwLH/1/