css3 文字图片居中对齐

CSS3中提供了许多对文字和图片居中对齐的方式，便于制作网页时对元素进行布局，加上美观的显示效果。

.center {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
    

以上代码展示了一个class名为center的元素，实现了文字和图片在内部垂直水平居中的效果。其中text-align: center; 用于文字水平居中，display: flex; 设置为弹性布局，justify-content: center; 实现水平居中，align-items: center; 则是实现垂直居中。

.img-center {
    display: block;
    margin: 0 auto;
}
    

如果要对图片居中对齐，可以使用以上代码。其中display: block; 将图片设置为块级元素，margin: 0 auto; 为设置上下边距为0后，左右自动居中。这样，图片就可以在元素中水平居中对齐了。

.text-center {
    display: flex;
    justify-content: center;
}
    

另外，如果只想对文本进行居中对齐，可以使用以上代码。其思路和之前的图片居中类似，都是设置弹性布局，并设置justify-content: center; 属性，将文本水平居中。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！