it-swarm-pt.tech

Texto alinhado à esquerda, central e direita na mesma linha

Existe uma maneira de alinhar o texto à esquerda, ao centro e à direita na mesma linha do HTML/CSS, nas seguintes condições?

  1. Os trechos de texto esquerdo e direito serão curtos, mas não conheço seu tamanho com antecedência.
  2. A parte central do texto pode ser longa o suficiente para ser quebrada.
  3. A parte central do texto deve aparecer EXATAMENTE no centro.
  4. A parte central do texto não deve se sobrepor às partes esquerda ou direita.

A solução óbvia de usar 3 divs com os dois flutuando para a esquerda e para a direita funciona muito bem, exceto que a parte central do texto não está exatamente centralizada (por exemplo, se a parte esquerda do texto for maior que a direita, o centro aparecerá centralizado à direita do centro absoluto).

Eu só preciso de uma solução que funcione no WebKit. Alguma ideia?

Editar - Isto é o que eu tenho até agora ...

HTML:

<div id="left">Left</div>
<div id="center">Center text</div>
<div id="right">Right</div>

CSS:

#left {
    float: left;
    text-align: left;
    padding-right: 10px;
}

#center {
    text-align: center;
}

#right {
    float: right;
    text-align: right;
    padding-left: 10px;
}
13
Hilton Campbell

Você precisará "enganar" a coluna da esquerda para que ela seja tão larga quanto a direita, copiando o texto da direita para a coluna da esquerda. Por quê? Quando a coluna central precisar quebrar, a fim de manter o centro em relação a toda a tabela, ela precisará quebrar como se as outras colunas tivessem a mesma largura. Você pode ver isso aqui: http://jsfiddle.net/brettwp/n5eSB/ ajustando o tamanho do painel Result. Observe que isso torna sua tabela uma linha mais alta devido ao conteúdo oculto. Como não conheço todos os detalhes da sua implementação, você precisará fazer ajustes (estouro oculto, margens negativas, posição relativa etc.) para que isso caiba na página, mas você deve começar:

<table>
    <tr>
        <td class="d1">
            left
            <div class="copy">right text</div>
        </td>
        <td class="d2">
            center text that is long enough to force a Word wrap!
        </td>
        <td class="d3">right text</td>
    </tr>
</table>

table {
    width: 100%;
}
td {
    vertical-align: top;
}
.d1 {
    text-align: left;
}
.d2 {
    text-align:center;
}
.d3 {
    text-align:right;
}
.copy {
    visibility: hidden;
}
.copy, .d3 {
    white-space: nowrap;
}
6
Brett Pontarelli

solução com divs claras

https://jsfiddle.net/LaL92q88/1/

<div style="float: left">Left Text</div>
<div style="float: right">Right Text</div>
<div style="margin: 0 auto; width: 100px;">Centered Text</div>
17
razon

Você pode conseguir isso com as propriedades display: table (-row/-cell):

http://jsfiddle.net/WYxek/

<div class="table">
    <div class="tr">
        <div class="d1">left text</div>
        <div class="d2">center text</div>
        <div class="d3">right text</div>
    </div>
</div>



.table {
    display:table;
    width:100%;
}
.tr {
    display:table-row;
}
.d1 {
    display:table-cell;
    width:25%;
}
.d2 {
    display:table-cell;
    text-align:center;
    width:50%;
}
.d3 {
    display:table-cell;
    text-align:right;
    width:25%;
}
4
ptriek