Need helping with column alignment

Question

I need help aligning a text inside an image, that will display has a "grid" or 3 table columns, centered inside <div class="container">...</div>.

I cant center the text with the image. heres the design preview: IMAGE LINK PREVIEW

Here is the JSFIDDLE

You can also see it "live" (im testing the page) HERE

HTML

<div id="services">
<div class="spacer"></div>
    <div class="conteudo container clearfix">

                <h2>Serviços</h2>
                <h3>Preçários e penteados</h3>

            <div class="holder container clearfix">

                <div class="servico container clearfix">
                    <img src="http://styleeuclides.site50.net/img/top.jpg" class="imgtop"><span class="top">Corte e Afiar + Barba</span>
                    <span class="price">10€</span>
                    <img src="http://styleeuclides.site50.net/img/corte.jpg" alt="corte" class="cut">
                </div>

                <div class="servico container clearfix">
                    <img src="http://styleeuclides.site50.net/img/top.jpg" class="imgtop"><span class="top">Corte e Afiar + Barba</span>
                    <span class="price">10€</span>
                    <img src="http://styleeuclides.site50.net/img/corte.jpg" alt="corte" class="cut">
                </div>

                <div class="servico container clearfix">
                    <img src="http://styleeuclides.site50.net/img/top.jpg" class="imgtop"><span class="top">Corte e Afiar + Barba</span>
                    <span class="price">10€</span>
                    <img src="http://styleeuclides.site50.net/img/corte.jpg" alt="corte" class="cut">
                </div>

                <div class="servico container clearfix">
                    <img src="http://styleeuclides.site50.net/img/top.jpg" class="imgtop"><span class="top">Corte e Afiar + Barba</span>
                    <span class="price">10€</span>
                    <img src="http://styleeuclides.site50.net/img/corte.jpg" alt="corte" class="cut">
                </div>

                <div class="servico container clearfix">
                    <img src="http://styleeuclides.site50.net/img/top.jpg" class="imgtop"><span class="top">Corte e Afiar + Barba</span>
                    <span class="price">10€</span>
                    <img src="http://styleeuclides.site50.net/img/corte.jpg" alt="corte" class="cut">
                </div>

                <div class="servico container clearfix">
                    <img src="http://styleeuclides.site50.net/img/top.jpg" class="imgtop"><span class="top">Corte e Afiar + Barba</span>
                    <span class="price">10€</span>
                    <img src="http://styleeuclides.site50.net/img/corte.jpg" alt="corte" class="cut">
                </div>

            </div>
    </div>

</div>

CSS

#services{
    float: left;
    width: 100%;
    background-color: #131313;
    color: #fff;
    margin: 0;
    padding: 0;
}

#services .spacer{
    width: 100%;
    height: 100px;
}

#services .conteudo h2{
    float: left;
    margin-top: 10px;
    font-size: 1.500em;
    font-weight: bold;
    margin-bottom: 5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 0;
    width: 900px;
}

#services .conteudo h3{
    float: left;
    color: #0ebe5b;
    font-size: 0.813em;
    font-style: italic;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 10px;
    letter-spacing: -1px;
    margin-top: -11px;
    width: 900px;
}

#services .holder .servico{
    float: left;
    width:30%;
    margin-left: 1.1%;
    margin-right: 2.2%;
    text-align: center;
}    

#services .holder span{
    position: absolute;
}

#services .holder span.price{
    color: white;
    font-style: italic;
    font-weight: bold;
    font-size: 1.000em;
    z-index: 2;
    line-height: 50px;
}

#services .holder span.top{
    color: white;
    font-style: italic;
    font-weight: bold;
    font-size: 0.875em;
    z-index: 2;
    line-height: 50px;
    width: 290px;
    height: 50px;
}

#services .holder .cut{
    margin-bottom: 10px;
}

Thanks in advance

Answer 1

please correct your html structure you are required background instead of image here is an example

<div class="top-area">
        <span class="title">Corte e Afiar + Barba</span>
        <span class="price">10€</span>
    </div>

span.title{ width:200px; background:#0ebe5b; display:table-cell;}
span.price{ width:50px; background:#272727; display:table-cell; color:#ffffff;}
span.price, span.title{ padding:10px; text-align:center;} 

Answer 2

This is one of the siple way to correct this.

#services{
    float: left;
    width: 100%;
    background-color: #131313;
    color: #fff;
    margin: 0;
    padding: 0;
}

#services .spacer{
    width: 100%;
    height: 100px;
}

#services .conteudo h2{
    float: left;
    margin-top: 10px;
    font-size: 1.500em;
    font-weight: bold;
    margin-bottom: 5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 0;
    width: 900px;
}

#services .conteudo h3{
    float: left;
    color: #0ebe5b;
    font-size: 0.813em;
    font-style: italic;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 10px;
    letter-spacing: -1px;
    margin-top: -11px;
    width: 900px;
}

#services .holder .servico{
    float: left;
    width:30%;
    margin-left: 1.1%;
    margin-right: 2.2%;
    text-align: center;
}    

#services .holder span{
    position: absolute;
}

#services .holder span.price{
    color: white;
    font-style: italic;
    font-weight: bold;
    font-size: 1.000em;
    z-index: 2;
    line-height: 50px;
}

#services .holder span.top{
    color: white;
font-style: italic;
font-weight: bold;
font-size: 0.875em;
z-index: 2;
position: relative;
top: -40px;
}

#services .holder .cut{
    margin-bottom: 10px;
}

Here is the jsfiddle