HTML5 set image and text label in the center of web page - css

Question

I need help with HTML / .css
I am trying to setup Image and Text in the center of Web Form Page. Also Image should be on the left of Text.
I've tried 2 solutions, but when I create table - it display on the left of screen and can't go middle.
A
<section class="main-page">
<div class="image-wrapper">
<asp:Image ID="Image2" Height="35px" runat="server" ImageUrl="~/Images/Origin/logo.jpg" />
</div>
<div class="content-wrapper">
<hgroup class="title">
<h1><%: Title %></h1>
</hgroup>
</div>
</section>
B
<table>
<tbody>
<tr>
<th><h1><%: Title %></h1></th>
<th><asp:Image ID="Image2" Height="35px" runat="server" ImageUrl="~/Images/Origin/logo.jpg" /></th>
</tr>
</tbody>
</table>
.css
.content-wrapper {
margin: 0 auto;
/*max-width: 960px;*/
}

Answer 1

You need to place the image/text in a container with text-align:center; defined in order for them to be centred, then the text should simply precede the image.
If for whatever reason the img element cant be placed following the text, you may need to float the elements to rearrange their ordering.
If the text is within a block level element, you will also need to set display:inline-block on it
As a basic demo:
HTML
<section>Text
<img src='https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRdw26b_dwa8moS-gRSFpaG3dwJTB6Nqtqxexmb7PscuD5gVP-P' />
</section>
CSS
section {
text-align:center;
vertical-align:Center;
}
Demo Fiddle of example A
HTML
<section class="main-page">
<div class="image-wrapper">
<img src='https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRdw26b_dwa8moS-gRSFpaG3dwJTB6Nqtqxexmb7PscuD5gVP-P' />
</div>
<div class="content-wrapper">
<hgroup class="title">
<h1>Title</h1>
</hgroup>
</div>
</section>
CSS
body{
text-align:center;
}
div, section{
display:inline-block;
}
div:first-child{
float:right;
}
div:last-child{
float:left;
}
Demo Fiddle of example B
HTML
<table>
<tbody>
<tr>
<th><h1>Title</h1></th>
<th><img src='https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRdw26b_dwa8moS-gRSFpaG3dwJTB6Nqtqxexmb7PscuD5gVP-P' /></th>
</tr>
</tbody>
</table>
CSS
body{
text-align:center;
}
table{
display:inline-block;
}