Question

我需要帮助对齐图像中的文本，它将显示一个“网格”或3个表格列，位于<div class="container">...</div>内。

我不能用图像将文本居中。下面是设计预览：IMAGE LINK PREVIEW

你也可以看到它“直播”（即时测试页面）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;
}

提前致谢

Answer 1

请更正您需要的html结构背景而不是图片，这里是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

这是解决此问题的简单方法之一。

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

以下是jsfiddle

Answer 3

sevocêusa

position: relative;
top: px;
left:  px;

torna-semuitofácil。 VáevêoFIDDLE

需要帮助进行色谱柱对齐

3 个答案: