css不定款元素如何居中

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

CSS不定宽元素如何居中?自适应宽度的元素需要使用另一种技术来实现居中。以下是几种方法:1. text-align:center。.container { text-align:center; } .

CSS不定宽元素如何居中?自适应宽度的元素需要使用另一种技术来实现居中。以下是几种方法:

1. text-align:center。

.container {
    text-align:center;
}
.element {
    display:inline-block;
} 

2. flexbox。

.container {
    display:flex;
    justify-content:center;
}
.element {
    flex:0 0 auto;
} 

3. absolute和margin。

.container {
    position:relative;
}
.element {
    position:absolute;
    left:50%;
    transform:translateX(-50%);
} 

4. table-cell。

.container {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}
.element {
    display:inline-block;
} 

请注意,这些技术只能用于已知高度的元素。如果你不知道一个元素的高度,那么你必须使用JavaScript来确定它的高度并居中。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css不定款元素如何居中

粉丝

0

关注

0

收藏

0

已有0次打赏