Jump to content
rain13

Need help with aligning texts

Recommended Posts

Hi!

It looks like a simple thing but right now I couldnt find any way to do it:

I need text to be aligned center and then an other text below it. But the text that is below it must be aligned so that it's right  side is at same place where previous line's right side.
 

<div style="text-align: center; width: 864px; background-color: red">
	<span style="background-color: blue">Some long text that takes more space that is nicely centered</span>
	<br>
	<span style="background-color: green">aligned to right</span>
</div>

right now the green and blue are both centered. I need the green block end where blue block ends.

Share this post


Link to post
Share on other sites

This seems to work

<div style="text-align: center; width: 864px; background-color: red;">
	<span style="background-color: blue;">Some long text that takes more space that is nicely centered</span>
	
	<span style="background-color: green; vertical-align: bottom; margin-left: -0.2em;">aligned to right</span>
</div>

along with

span:first-child::after {
    content: "";
    display: inline-block;
    margin-top: 2.5em;
    vertical-align: top;
}

https://www.w3schools.com/code/tryit.asp?filename=FL3D27QRO099

Share this post


Link to post
Share on other sites

Ok, now the left side of green block starts where blue ends. But I needed right side of green to end where right side of blue ends.

Edit: Got it solved.

Trick was to add span around 2 inner spans with display inline block and then inside this I was able align right.

Btw, your example was also interesting. I havent seen such alignment before.

Edited by rain13

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×