À propos de l'utilisation de CSS pour centrer le texte et les images verticalement et horizontalement

黄舟

Libérer： 2017-06-06 13:25:26

original

2049 Les gens l'ont consulté

À propos de l'utilisation du CSS pour réaliser du texte et des imagescentrage vertical et horizontal

J'ai toujours cru qu'une bonne mémoire n'était pas aussi bonne qu'un mauvais stylo. Récemment, j'ai rencontré beaucoup de centrage vertical pour lequel je vais faire le tri. référence future.

1. Centrez le texte verticalement et horizontalement

1. :

Il n'y a rien à dire sur le centrage horizontal du texte. Cela peut être facilement réalisé en utilisant text-align: center;.

2. Centré verticalement :

1) Texte simple sur une seule ligne

　Utilisez line-height==height pour créer un seul texte en ligne Centré verticalement.

1 <p>
2     垂直水平居中
3 </p>

Copier après la connexion

1 p{
2     width: 200px;
3     height: 200px
4     text-align: center;
5     line-height: 200px;
6     background:#1AFF00;7 }

Copier après la connexion

Pour faire simple, utilisez simplement la balise p, comme ceci

<p>垂直水平居中</p>

Copier après la connexion

1 p{
2     width: 200px;
3     height: 200px;
4     text-align: center;
5     line-height: 200px;
6     background:#00ABFF;7 
}

Copier après la connexion

L'effet est le suivant :

2) Texte multiligne

En utilisant les caractéristiques de l'élément table, l'élément parent au niveau du bloc display: table;inline elementdisplay: table-cell; alignement vertical : middle ;

(en ligne)

1 <p
2     <span>国际《儿童权利公约》界定的儿童系指18岁以下的任何人</span>
3 </p>

Copier après la connexion

 1 p{ 
 2     width: 200px; 
 3     height: 200px; 
 4     display: table; 
 5     background:#1AFF00; 
 6 } 
 7 span{ 
 8     display: table-cell; 
 9     vertical-align: middle;10 }

Copier après la connexion

(niveau de bloc)

1 <p>
2     <p>国际《儿童权利公约》界定的儿童系指18岁以下的任何人</p>
3 </p>

Copier après la connexion

+transform: translationY(-50%);

Positionnement + marge : auto

 1 p{ 
 2     position: relative; 
 3     width: 200px; 
 4     height: 200px; 
 5     background: #00ABFF; 
 6 } 
 7 p{ 
 8     position: absolute; 
 9     top: 50%;
 10     left: 0;
 11     width: 200px;
 12     height: 64px;
 13     transform: translateY(-50%);14 }

Copier après la connexion

Les deux sont à largeur et hauteur fixes . L'élément parent utilise la valeur

padding, qui est la hauteur de l'élément parent moins la hauteur de l'élément enfant

 1 p{ 
 2     position: relative; 
 3     width: 200px; 
 4     height: 200px; 
 5     background:#1AFF00; 
 6 } 
 7 p{ 
 8     position: absolute; 
 9     top: 50%;
 10     left: 0;
 11     width: 200px;
 12     height: 64px;
 13     margin-top: -32px;
 14 }

Copier après la connexion

Les deux ont une largeur et une hauteur fixes. , l'élément parent utilise

overflow

: caché ; (css hack) l'élément enfant utilise la valeur de marge, cette valeur est le parent La hauteur de l'élément moins la moitié de la hauteur de l'élément enfant

 1 p{ 
 2     position: relative; 
 3     width: 200px; 
 4     height: 200px; 
 5     background:#00ABFF; 
 6 } 
 7 p{ 
 8     position: absolute; 
 9     top: 0;
 10     left: 0;
 11     right: 0;
 12     bottom: 0;
 13     margin: auto;
 14     width: 200px;
 15     height: 64px;
 16 }

Copier après la connexion

a l'effet suivant :

 1 p{ 
 2     width: 200px; 
 3     height: 64px; 
 4     padding: 68px 0; 
 5     background:#1AFF00; 
 6 } 
 7 p{ 
 8     width: 200px; 
 9     height: 64px;
 10 }

Copier après la connexion

p{
    width: 200px;
    height: 200px;
    overflow: hidden;
    background:#00ABFF;
}
p{
    width: 200px;
    height: 64px;
    margin:68px auto;
}

Copier après la connexion

2. Centrer l'image verticalement et horizontalement

1. Centrez-le horizontalement

1) img est un bloc en ligne dans le paramètre initial de CSS, un élément de bloc en ligne. Si vous souhaitez le centrer horizontalement, utilisez text-align:center;

　<🎜. >2) Définissez display:block pour l'élément img ; convertissez-le en un élément de niveau bloc. Si vous souhaitez le centrer horizontalement, utilisez margin:0 auto;.

2. Centrage vertical

　 1 .jpg

Utilisez cette image comme démonstration line-height==height vertical-align : milieu;

　affichage : table-cell;vertical-align : milieu;

affichage : table-cell;vertical-align : milieu ; align: center;

1 <p>
2     <img alt="" src="1.jpg" />
3 </p>

Copier après la connexion

Positionnement+affichage: block;transform: translation(-50%,-50%);

p{
    width: 198px;
    height: 198px;
    text-align: center;
    line-height: 198px;
    border: 1px solid #8900FF;
}
img{
    vertical-align: middle;
}

Copier après la connexion

Positionnement+marge valeur négative

p{
    position: relative;
    width: 198px;
    height: 198px;
    border: 1px solid #8900FF;
}
img{
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -75px 0 0 -75px;
}

Copier après la connexion

　　定位+margin: auto;

p{
    position: relative;
    width: 198px;
    height: 198px;
    border: 1px solid #8900FF;
}
img{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    display: block;
}

Copier après la connexion

　　 overflow: hidden;margin值

p{
    width: 198px;
    height: 198px;
    overflow: hidden;
    border: 1px solid #8900FF;
}
img{ 8     margin: 25px;
}

Copier après la connexion

　　padding值

 p{
 2     padding: 25px;
 3     width: 148px;
 4     height: 148px;
 5     border: 1px solid #8900FF;
 6 }

Copier après la connexion

　　用table的属性+vertical-align: middle;实现

1 <p>2     <span><img alt="" src="1.jpg" /></span>3 </p>

Copier après la connexion

p{
    display: table;
    width: 198px;
    height: 198px;
    text-align: center;
    border: 1px solid #8900FF;
}
span{
    display:table-cell;
    vertical-align: middle;
}

Copier après la connexion

　　用background实现

1 <p></p>

Copier après la connexion

1 p{
2     width: 198px;
3     height: 198px;
4     border: 1px dashed #8900FF;
5     background: url(1.jpg) no-repeat center center;
6 }

Copier après la connexion

　　效果如下：

原文来自：http://www.cnblogs.com/Ni-F/p/6937931.html 感谢作者分享！

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!