html 按Angular 水平对齐组件

goqiplq2 于 11个月前发布在 Angular

关注(0)|答案(2)|浏览(193)

我有这两个组件，我不能水平对齐它们。

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

字符串
我试图将它们与：
display:flex;float:left;然而，每次我尝试侧边栏封面标题。

Html

来源：https://stackoverflow.com/questions/77705600/align-components-horizontally-in-angular

2条答案

按热度按时间

nwlls2ji1#

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

字符串
你可以使用display: flex和justify-content: center。如果你想左或右，你也可以使用justify-content: start;或justify-content: end;`
希望对你有帮助。

赞(0）回复(0）举报 11个月前

2ul0zpep2#

不要使用float，您使用了flexbox和flex：1来使两个子div平均占用空间

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

字符串
也可以看看这个https://flexboxfroggy.com/，当我开始学习flex的时候，它对我理解它有很大的帮助。

赞(0）回复(0）举报 11个月前

我来回答

html 按Angular 水平对齐组件

2条答案

相关问题

热门标签

最新问答