Html Question posted in
Some basic documentation can be found here.

Html – Align components horizontally in angular

I have these two components and i cannot align them horizontally.

<div style="float: left;">
    <div>
        <app-sidebar></app-sidebar>
    </div>
    <div style="margin-left: 8.4rem;">
        <app-title></app-title>
    </div>
</div>

I tried to align them with:
display:flex;
float:left;
However, every time I try the sidebar covers title.

Tags:

2

Answers


  1. 0

    `

    <div style="display: flex; justify-content: center">
        <div>
            <app-sidebar></app-sidebar>
        </div>
        <div >
            <app-title></app-title>
        </div>
    </div>

    `

    you can use display: flex and justify-content: center.
    If you want to left or right, also you can use justify-content: start; or justify-content: end;

    Hope it will help you.

    Login or Signup to reply.
  2. 0

    Don’t use float, you used flexbox, and flex: 1 to make both children div equally take up the space

    <div style="display: flex;">
    <div style="flex: 1;">
        <app-sidebar></app-sidebar>
    </div>
    <div style="margin-left: 8.4rem; flex: 1;">
        <app-title></app-title>
    </div>
</div>

    Also check this out https://flexboxfroggy.com/ it helps me a lot to understand flex when I was starting to learn it

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search