Css 需要帮助进行柱对齐吗

我需要帮助对齐图像中的文本，该图像将显示一个“网格”或3个表格列，居中于

…

我无法将文本与图像居中。以下是设计预览：

这是你的电话号码

您还可以看到它“实时”（我正在测试页面）

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>

---

提前感谢

请更正您的html结构您需要的是背景而不是图像这里是一个

Corte e Afiar+Barba
10€
span.title{宽度：200px；背景：#0ebe5b；显示：表格单元格；}
span.price{宽度：50px；背景：#272727；显示：表格单元格；颜色：#ffffff；}
span.price，span.title{padding:10px；text align:center；}

这是纠正这一问题的简单方法之一

#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;
}

---

这是

哇！谢谢，我不得不从CSS中删除一些行，并添加了urs和完美贴合！看不到你的链接，它是broken@Andy请参阅更新的代码和JSFIDLE链接。

<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;} 

#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;
}