1

Gostaria de saber como alinho um texto verticalmente, sendo que em relação à uma palavra/letra da linha anterior? Quando uso apenas a barra de espaço não consigo o resultado. Teria algum código pra isso?

Por exemplo, digamos que quero alinhar todos os numerais "1" no seguinte texto, para que fiquem um abaixo do outro:

      olá 1 beijo

beijo olá 1

          1 beijo olá
1
  • Acredito que você pode usar position:relative na div que contem o "1", e position:absolute nos itens que vão ficar do lado, se for na direita, uma um right:0 se for esquerda left:0 ou um valor que desejar. Commented 1/09/2014 às 12:46

3 Respostas 3

2

Uma possível solução seria usar posições absolutas, mas qualquer diferença nas fontes utilizadas bagunçaria seu layout.

Com um pequeno ajuste no HTML, dá para solucionar o problema:

<div class="alinhados">
    <p><span>olá 1</span>beijo</p>
    <p><span>beijo olá 1</span></p>
    <p><span>1</span>beijo olá</p>
</div>

E no CSS:

.alinhados p {
   position:relative;
   overflow:auto;
   width:100%;
}

.alinhados span {
   display:block;
   position:relative;
   width:50%;
   float:left;
   text-align:right;  
}

Desta forma, basta ajustar o width:50% para determinar o ponto do alinhamento.

Veja funcionando no JS Fiddle.

1

Você terá que usar JavaScript para fazer isso, embora o CSS seria suficiente, porém ficaria limitado em relação ao alinhamento do texto.
Utilize Jquey para facilitar.
O alinhamento será sempre em relação ao primeiro elemento, sendo assim poderá alinha-lo onde quiser.

Veja um exemplo funcionando: http://jsfiddle.net/719xowwv/

Com o script acima, basta introduzir novos frases que automaticamente será alinhado.

Como o link poderá um dia não funcionar, deixo aqui o código completo:

HTML:

<div class="textos">
    <p>olá <span>1</span> beijo</p>
    <p>beijo olá <span>1</span></p>
    <p><span>1</span> beijo olá</p>
</div>

CSS:

.textos {
    display: block;
    float: left;
    width: auto;
    height: auto;
 }

.textos p {
    display: block;
    float:left;
    position: relative;
    clear: both;
}

JavaScript: (é necessário incluir a biblioteca Jquery na sua página)

var nPos;

$(document).ready(function(){
    $(".textos p").each(function( index ) {
        if(nPos==undefined){
            nPos = $(this).find('span').position().left;
        }else{
            nCurrentPos = $(this).find('span').position().left;
            $(this).css({'margin-left':(nPos-nCurrentPos)+'px'});
        }
    });
});
0

Olá para cade texto voce pode usar a tag

de paragrafo ex:

<div>
<p>olá 1 beijo</p>
<p>beijo olá 1</p>
<p>1 beijo olá</p>
</div>

caso não seja isso por favor posta um pedaço do seu codigo

1
  • Dessa forma ele não alinha verticalmente. Commented 1/09/2014 às 12:52

Você deve fazer log-in para responder a esta pergunta.