欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

css文本，元素，图像居中对齐方式

程序员文章站 2022-03-02 15:41:49
...
元素居中
.center {
    margin: auto;
    width: 50%;
    border: 3px solid green;
    padding: 10px;
}
注意: 如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用。

文本居中
.center {
    text-align: center;
    border: 3px solid green;
}
图像居中
img {
    display: block;
    margin: auto;
    width: 40%;
}
文本右对齐
.right {
    position: absolute;
    right: 0px;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}
.right {
    float: right;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}

提示: 当使用 position 来对齐元素时, 通常 <body> 元素会设置 margin 和 padding 。 这样可以避免在不同的浏览器中出现可见的差异。

居中对齐
.center {
    padding: 70px 0;
    border: 3px solid green;
}
水平垂直居中
.center {
    padding: 70px 0;
    border: 3px solid green;
    text-align: center;
}
.center {
    line-height: 200px;
    height: 200px;
    border: 3px solid green;
    text-align: center;
}
 
/* 如果文本有多行，添加以下代码: */
.center p {
    line-height: 1.5;
    display: inline-block;
    vertical-align: middle;
}
.center { 
    height: 200px;
    position: relative;
    border: 3px solid green; 
}
 
.center p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}








上一篇： 业务逻辑层（service层）单元测试的实践

下一篇： SpringBoot—单元测试模板（controller层和service层）

推荐阅读