Position of a text relative to the top line

Asked

Viewed 660 times

1

I would like to know how to line up a text vertically, compared to a word/letter of the previous line? When I use only the space bar I can’t get the result. Would have some code for it?

For example, let’s say I want to align all the numerals "1" in the following text, so that they are below each other:

      olá 1 beijo

beijo olá 1

          1 beijo olá
html css positioning

  • I believe you can use position:relative in the div containing the "1", and position:absolute on the items that will be on the side, if it is on the right, a right:0 if left left:0 or a value you want.

3 answers

2

A possible solution would be to use absolute positions, but any difference in the fonts used would mess up its layout.

With a small HTML adjustment, you can solve the problem:

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

And in the CSS:

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

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

This way, just adjust the width:50% to determine the point of alignment.

See working on JS Fiddle.

1

You will have to use Javascript to do this, although CSS would be sufficient, but would be limited to the alignment of the text.
Utilize Jquey to facilitate.
Alignment will always be relative to the first element, so you can align it wherever you want.

See an example working: http://jsfiddle.net/719xowwv/

With the above script, just enter new sentences that will automatically be aligned.

As the link may one day not work, I leave here the complete code:

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: (you need to include the Jquery library on your page)

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

Hello to Text box Voce can use tag

paragraphically ex:

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

If not, please post a piece of your code

Browser other questions tagged html css positioning

You are not signed in. Login or sign up in order to post.